body { font-family: Montserrat, sans-serif } {} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } .global-style-nK2AH4UiC { cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } @media (max-width: 639px) { .global-style-nK2AH4UiC { font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } } @media (max-width: 767px) and (min-width: 640px) { .global-style-nK2AH4UiC { font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } } @media (max-width: 991px) and (min-width: 768px) { .global-style-nK2AH4UiC { font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } } @media (max-width: 1199px) and (min-width: 992px) { .global-style-nK2AH4UiC { font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } } @media (min-width: 1200px) { .global-style-nK2AH4UiC { font-size: 24px;color: rgb(255, 255, 255);text-align: center;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;margin-top: 30px;padding-left: 50px;padding-right: 50px;padding-top: 19px;padding-bottom: 19px;align-items: center;display: inline-flex;cursor: pointer;text-decoration-line: none;text-decoration-style: solid;text-decoration-color: initial; } } .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: transparent; } @media (max-width: 639px) { .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: rgb(240, 149, 88); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover { background-color: rgb(89, 198, 152); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active { background-color: rgb(32, 45, 60); } } @media (max-width: 767px) and (min-width: 640px) { .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: rgb(240, 149, 88); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover { background-color: rgb(89, 198, 152); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active { background-color: rgb(32, 45, 60); } } @media (max-width: 991px) and (min-width: 768px) { .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: rgb(240, 149, 88); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover { background-color: rgb(89, 198, 152); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active { background-color: rgb(32, 45, 60); } } @media (max-width: 1199px) and (min-width: 992px) { .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: rgb(240, 149, 88); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover { background-color: rgb(89, 198, 152); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active { background-color: rgb(32, 45, 60); } } @media (min-width: 1200px) { .global-style-nK2AH4UiC:not([data-gp-component="block"]), .global-style-nK2AH4UiC [data-section-overlay] { background-color: rgb(240, 149, 88); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):hover,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-hover, .global-style-nK2AH4UiC [data-section-overlay]:hover, .global-style-nK2AH4UiC [data-section-overlay].gp-hover { background-color: rgb(89, 198, 152); } .global-style-nK2AH4UiC:not([data-gp-component="block"]):active,.global-style-nK2AH4UiC:not([data-gp-component="block"]).gp-active, .global-style-nK2AH4UiC [data-section-overlay]:active, .global-style-nK2AH4UiC [data-section-overlay].gp-active { background-color: rgb(32, 45, 60); } } .gp-component-id-SizX3IZqB.gp-component > [data-section-overlay] { position: absolute;bottom: 0px;top: 0px;left: 0px;right: 0px;background-color: rgb(105, 48, 195); } @media (max-width: 639px) { .gp-component-id-SizX3IZqB.gp-component > [data-section-overlay] { background-color: rgb(0, 0, 0);position: absolute;bottom: 0px;top: 0px;left: 0px;right: 0px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-SizX3IZqB.gp-component > [data-section-overlay] { background-color: rgb(0, 0, 0);position: absolute;bottom: 0px;top: 0px;left: 0px;right: 0px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-SizX3IZqB.gp-component > [data-section-overlay] { background-color: rgb(0, 0, 0);position: absolute;bottom: 0px;top: 0px;left: 0px;right: 0px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-SizX3IZqB.gp-component > [data-section-overlay] { background-color: rgb(0, 0, 0);position: absolute;bottom: 0px;top: 0px;left: 0px;right: 0px; } } @media (min-width: 1200px) { .gp-component-id-SizX3IZqB.gp-component > [data-section-overlay] { background-color: rgb(0, 0, 0);position: absolute;bottom: 0px;top: 0px;left: 0px;right: 0px; } } @media (max-width: 639px) { .gp-component-id-SizX3IZqB[data-gp-component] { margin-bottom: 0px;padding-top: 14px;padding-bottom: 0px;z-index: auto !important;position: relative; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-SizX3IZqB[data-gp-component] { margin-bottom: 0px;padding-top: 14px;padding-bottom: 0px;z-index: auto !important;position: relative; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-SizX3IZqB[data-gp-component] { margin-bottom: 0px;padding-top: 14px;padding-bottom: 0px;z-index: auto !important;position: relative; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-SizX3IZqB[data-gp-component] { margin-bottom: 0px;padding-top: 14px;padding-bottom: 0px;z-index: auto !important;position: relative; } } @media (min-width: 1200px) { .gp-component-id-SizX3IZqB[data-gp-component] { margin-bottom: 0px;padding-top: 14px;padding-bottom: 0px;z-index: auto !important;position: relative; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* Swap this URL to your preferred banner image */ .hero-bleed{ --hero-bg: url("https://images.groovetech.io/Ga6oAjonjqMWwlql_Vf_oY-4Dk_DCtp69DO5KdywCgU/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzLzI3NTEzODQ0MDBfV2hhdHNBcHBJbWFnZTIwMjUwNzAxYXQ5MDkzN1BNLmpwZWc.webp"); } /* Full-bleed background with readable overlay */ .hero-bleed{ position: relative; background-image: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(60vh, 78vh, 88vh); display: flex; align-items: center; padding: 96px 0 72px; /* extra top padding so it clears the sticky navbar */ color: #fff; } .hero-inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .hero-title{ margin: 0 0 10px; line-height: 1.05; font-size: clamp(32px, 5vw, 54px); letter-spacing: .2px; } .hero-title .sep{ opacity:.7; margin: 0 .2em; } .hero-title .accent{ background: linear-gradient(90deg, #fd6481, #ff809c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .hero-sub{ margin: 8px 0 18px; font-size: clamp(15px, 1.8vw, 18px); color: #f3f3f3; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-weight:800; border:2px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; cursor:pointer; } .btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); } .btn-primary{ background:#fd6481; color:#fff; } .btn-ghost{ background:transparent; color:#fff; border-color: rgba(255,255,255,.85); } .btn-ghost:hover{ background: rgba(255,255,255,.08); } .hero-points{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px; font-weight:700; font-size:14px; color:#fff; } .hero-points i{ color:#ffdbe3; margin-right:6px; } /* Mobile tweaks */ @media (max-width: 1024px){ .hero-bleed{ padding: 88px 0 60px; } } @media (max-width: 640px){ .btn{ height:44px; border-radius:10px; } .hero-points{ font-size:13.5px; } } /* ===== Tokens (remove if already defined globally) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --maxw:1200px; } /* SECTION WRAPPER */ .trust-band{ background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); padding: 56px 0; } .trust-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* GRID */ .trust-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; } .trust-col{ min-width: 0; } /* LEFT COLUMN */ .trust-title{ margin: 0 0 14px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; color: var(--brand); } .trust-lead{ position: relative; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 28px var(--ring); padding: 18px 18px 16px 54px; } .trust-lead .quote{ position: absolute; left: 16px; top: 8px; font-size: 40px; line-height: 1; color: var(--accent); opacity: .25; font-weight: 900; } .trust-lead p{ margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; } .trust-checks{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; } .trust-checks li{ display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 600; } .trust-checks i{ color: var(--accent); margin-top: 2px; } .trust-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* RIGHT COLUMN: STATS + BADGES */ .stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:14px 16px; box-shadow: 0 10px 24px var(--ring); } .stat .num{ font-weight: 900; font-size: 26px; color: var(--brand); line-height: 1.1; } .stat .num span{ font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; } .stat .lbl{ color:#555; font-size: 13px; margin-top: 4px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .badge{ text-align:center; padding:10px 8px; font-weight:800; font-size:13px; color:#333; background: #fff; border: 1.5px dashed #e9e1db; border-radius: 12px; } /* RESPONSIVE */ @media (max-width: 1024px){ .trust-grid{ grid-template-columns: 1fr; } } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 20px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 15px; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 10px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 15px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { display: flex; align-items: center; gap: 20px; flex: 1; } .nav-right { display: flex; justify-content: flex-end; } .nav-logo { height: 60px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; gap: 15px 20px; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Responsive */ @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { flex-direction: column; align-items: flex-start; } .nav-left { width: 100%; justify-content: space-between; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 20px; } .dropdown-menu { position: relative; box-shadow: none; } .nav-right { width: 100%; justify-content: center; margin-top: 10px; } .nav-logo { height: 50px; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 20px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-left { flex-shrink: 0; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex-grow: 1; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 10px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 8px 16px; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile Styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nav-logo-link { display: flex; align-items: center; } .nav-logo { height: 50px; object-fit: contain; } .nav-right { display: flex; align-items: center; } .hamburger { font-size: 24px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; margin-right: 10px; } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 12px; align-items: center; flex-wrap: wrap; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 8px 12px; border-radius: 5px; } .nav-links a:hover { color: #fff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 10px 0; border-radius: 8px; min-width: 160px; z-index: 999; } .dropdown-menu a { padding: 8px 16px; display: block; color: #202D3C; font-size: 14px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } /* Mobile styles */ @media (max-width: 768px) { .nav-container { flex-direction: column; align-items: flex-start; } .nav-right { flex-direction: column; width: 100%; align-items: flex-start; } .hamburger { display: inline-flex; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 10px; } .nav-links.show { display: flex; } .nav-links a { width: 100%; padding: 12px 16px; } .dropdown-menu { position: relative; box-shadow: none; } } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: space-between; /* logo left, links right */ align-items: center; } .nav-logo { height: 50px; } .nav-links { display: flex; /* make links horizontal */ list-style: none; margin: 0; padding: 0; gap: 20px; } .nav-links li { position: relative; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; padding: 8px 12px; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li a { display: block; padding: 8px 16px; white-space: nowrap; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 10px 30px; position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 50px; vertical-align: middle; /* fixes alignment */ } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 15px 20px; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* increased top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* ensures floats are contained */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 65px; /* slightly increased size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; /* keep links side by side */ position: relative; } .nav-links a { display: block; padding: 20px 20px; /* more vertical padding to match bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack dropdown items vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix (important for floats) */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* increased logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* adjusted padding to align with bigger logo */ text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 8px 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.2); width: 20px; height: 20px; line-height: 20px; } [data-gp-slider="ngILR0MrFT"] .swiper-pagination-bullet-active { background: #007aff; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 22px 18px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (use once globally; keep if you don't already have them) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Make Groove container transparent to avoid double-white */ .gp-component-id-contractors{ background:transparent !important; } /* Section background consistent with other modules */ .cta-pro{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .cta-pro .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } .cta-pro .grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; } /* Left white card */ .cta-pro .panel{ background:#fff; border-radius:16px; padding:40px; box-shadow:0 10px 30px var(--ring); } .cta-pro .title{ margin:0 0 8px; font-size:clamp(26px, 3vw, 36px); line-height:1.15; color:var(--brand); } .cta-pro .sub{ margin:0 0 16px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Features in a tidy 2x2 grid, perfectly aligned */ .cta-pro .feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px 16px; margin: 6px 0 18px; } .cta-pro .feature{ display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid #eee; border-radius:12px; background:#fff; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .cta-pro .feature:hover{ transform: translateY(-1px); box-shadow:0 8px 20px var(--ring); border-color:#e7e7e7; } .cta-pro .icon{ width:36px; height:36px; object-fit:contain; flex:0 0 36px; } .cta-pro .label{ color:var(--ink); font-size:15px; line-height:1.35; } /* Right image (no extra box) */ .cta-pro .media .hero-img{ width:100%; height:auto; border-radius:14px; display:block; box-shadow: 0 12px 32px var(--ring); } /* Buttons (same look/feel as your other modules) */ .btn-row{ margin-top: 10px; display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; color:#fff; background: var(--accent); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Responsive */ @media (max-width:1024px){ .cta-pro .grid{ grid-template-columns: 1fr; gap:22px; } .cta-pro .panel{ padding:24px; } .cta-pro .feature-grid{ grid-template-columns: 1fr; } } /* ===== Design tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Avoid double-white from Groove container */ .gp-component-id-2ACvfAF2P0{ background:transparent !important; } /* Section background matches other modules */ .section-products{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .section-products .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; } /* Intro */ .section-products .intro{ text-align:center; margin-bottom: 26px; } .section-products .title{ margin:0 0 8px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .section-products .subtitle{ margin:0 auto; color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:900px; } /* Grid */ .section-products .card-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Card */ .section-products .card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); display:flex; flex-direction:column; min-height:100%; transition: transform .12s ease, box-shadow .12s ease; } .section-products .card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--ring); } .section-products .card-media{ border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .section-products .img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 10; object-fit:cover; } .section-products .card-body{ padding:18px 18px 8px; } .section-products .card-title{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); color:var(--ink); } .section-products .card-text{ margin:0; color:var(--muted); font-size:15px; line-height:1.45; } .section-products .card-cta{ padding:14px 18px 20px; margin-top:auto; display:flex; justify-content:flex-start; } /* Buttons (consistent with other modules) */ .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Responsive */ @media (max-width:1100px){ .section-products .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width:640px){ .section-products .card-grid{ grid-template-columns: 1fr; } .section-products .card-body{ padding:16px 16px 6px; } .section-products .card-cta{ padding:12px 16px 16px; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* ===== Tokens (keep once globally if already present) ===== */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#555; --bg:#faf8f6; --card:#ffffff; --ring:rgba(78,52,46,.12); --pad-y:72px; --gap:32px; --maxw:1200px; } /* Section background matches the rest of the site */ .support-cta{ background: radial-gradient(1200px 600px at 10% 10%, #ffffff 0%, var(--bg) 60%, #f3eee9 100%); padding: var(--pad-y) 0; } .support-cta .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } /* White card */ .support-cta .panel{ background:#fff; border-radius:16px; box-shadow:0 10px 30px var(--ring); padding:40px; } /* Grid */ .support-cta .grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap: var(--gap); align-items: center; } .support-cta .col{ min-width:0; } /* Typography */ .support-cta .title{ margin:0 0 10px; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--brand); } .support-cta .lead{ margin:0 0 14px; color:var(--muted); font-size:clamp(15px,1.6vw,18px); } /* Bullets */ .support-cta .badges{ list-style:none; margin:0; padding:0; } .support-cta .badges li{ display:flex; gap:10px; align-items:flex-start; margin:7px 0; color:var(--ink); font-weight:600; } .support-cta .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px; display:inline-block; } /* Actions card */ .support-cta .contact-box{ border:1px solid #eee; border-radius:14px; padding:18px; background:#fff; box-shadow: 0 8px 22px var(--ring); } .support-cta .micro{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#888; } /* Chips */ .support-cta .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; } .support-cta .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1.5px solid #ececec; color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .support-cta .chip:hover{ transform: translateY(-1px); border-color:#e5e5e5; box-shadow:0 6px 16px var(--ring); } /* Buttons (reused site style) */ .support-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } .btn-ghost{ background:#fff; color: var(--accent); border-color: var(--accent); } /* Inline contacts */ .support-cta .inline-contacts{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0 2px; } .support-cta .ic{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; } .support-cta .ic i{ opacity:.7; } .support-cta .note{ margin:8px 0 0; color:#777; font-size:14px; } @media (max-width: 1024px){ .support-cta .panel{ padding:24px; } .support-cta .grid{ grid-template-columns:1fr; gap:22px; } } /* tokens (remove if already declared globally) */ :root{ --brand:#4e342e; --accent:#fd6481; --ink:#111; --muted:#666; --ring:rgba(78,52,46,.12); --maxw:1200px; } .gp-component-id-u3JwXexzR_{ background: transparent !important; } .contact-strip .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 28px 16px; } .strip-title{ margin: 0 0 14px; text-align: center; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--brand); } /* PILL STRIP */ .strip{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; /* give address a bit more room */ gap: 0; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 999px; /* pill */ box-shadow: 0 10px 28px var(--ring); overflow: hidden; } /* vertical dividers between items */ .strip > .strip-item + .strip-item{ position: relative; } .strip > .strip-item + .strip-item::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background: linear-gradient(180deg, transparent, #e9e9e9, transparent); } .strip-item{ display: grid; grid-template-columns: 56px 1fr; align-items: center; padding: 16px 18px; min-height: 84px; } .strip-item .icon{ width: 44px; height: 44px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff5f7; border: 1px solid #ffe1e8; margin: 0 auto; /* centers icon in its cell */ } .strip-item .icon i{ color: var(--accent); font-size: 18px; } .strip-item .content{ min-width: 0; } .strip-item .heading{ font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #999; margin-bottom: 4px; } .strip-item .lines{ display:flex; flex-direction: column; gap: 2px; color: var(--ink); font-size: 14.5px; line-height: 1.4; } .link{ color: var(--accent); text-decoration: none; font-weight: 700; border-bottom: 1px dashed transparent; transition: opacity .12s ease, border-color .12s ease; word-break: break-word; } .link:hover{ opacity: .9; border-color: var(--accent); } /* RESPONSIVE */ @media (max-width: 960px){ .strip{ grid-template-columns: 1fr; border-radius: 22px; } .strip > .strip-item + .strip-item::before{ display:none; } .strip-item{ grid-template-columns: 48px 1fr; border-top: 1px solid #f0f0f0; } .strip-item:first-child{ border-top: none; } } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } .custom-navbar { background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif; padding: 20px 40px; position: sticky; top: 0; z-index: 1000; text-align: center; } .nav-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; flex-direction: column; } .nav-logo { height: 70px; object-fit: contain; } .hamburger { font-size: 26px; background: none; border: none; cursor: pointer; display: none; color: #9B5DE5; } .nav-links { display: flex; flex-wrap: wrap; list-style: none; gap: 15px 20px; justify-content: center; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; color: #202D3C; transition: all 0.3s ease; padding: 10px 16px; border-radius: 5px; } .nav-links a:hover { color: #ffffff; background-color: #4E91F9; transform: scale(1.05); } .dropdown-menu { display: none; position: absolute; top: 100%; background-color: #fff; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 8px; min-width: 180px; z-index: 999; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; width: 100%; padding: 10px 20px; color: #202D3C; font-size: 16px; } .dropdown-menu a:hover { background-color: #f2f2f2; color: #4E91F9; } .dropdown:hover .dropdown-menu { display: block; } @media (max-width: 768px) { .hamburger { display: inline-flex; } .nav-container { align-items: flex-start; } .nav-links { flex-direction: column; width: 100%; display: none; margin-top: 20px; } .nav-links.show { display: flex; } } /* Navbar Styling */ .custom-navbar { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px 30px; /* top & bottom padding */ position: sticky; top: 0; z-index: 1000; overflow: hidden; /* contains floats */ } /* Logo Left */ .nav-logo-link { float: left; } .nav-logo { height: 80px; /* logo size */ vertical-align: middle; } /* Links Right */ .nav-links { float: right; list-style: none; margin: 0; padding: 0; } .nav-links li { float: left; position: relative; } .nav-links a { display: block; padding: 28px 22px; /* spacing adjusted */ text-decoration: none; font-size: 17px; /* increased text size */ font-weight: 600; /* slightly bolder */ color: #202D3C; transition: 0.3s; } .nav-links a:hover { background: #4E91F9; color: #fff; border-radius: 5px; } /* Dropdown */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.15); min-width: 150px; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { float: none; /* stack vertically */ } .dropdown-menu a { padding: 10px 18px; font-size: 16px; white-space: nowrap; } /* Clearfix */ .custom-navbar::after { content: ""; display: table; clear: both; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } /* Second-level submenu (does not alter your existing rules) */ .dropdown-menu .sub-dropdown { position: relative; } .dropdown-menu .sub-dropdown > a::after { content: "▸"; float: right; opacity: .6; } .dropdown-menu .submenu { display: none; position: absolute; top: 0; left: 100%; background: #fff; min-width: 200px; padding: 10px 0; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 999; } .dropdown-menu .sub-dropdown:hover .submenu { display: block; } /* Mobile: stack submenus under parent */ @media (max-width: 768px){ .dropdown-menu .submenu { position: static; box-shadow: none; margin-left: 10px; } .dropdown-menu .sub-dropdown > a::after { content: "▾"; } } /* Allow dropdowns to render above the next module */ .custom-navbar{ overflow: visible !important; /* stop clipping the dropdown */ z-index: 99999 !important; /* keep navbar above following sections */ } /* Make sure menus sit on top within the navbar stacking context */ .dropdown-menu{ z-index: 100000 !important; } .dropdown-menu .submenu{ z-index: 100001 !important; } /* ===== Tokens (keep only once globally if already added) ===== */ :root{ --brand:#4e342e; /* headings / brand accents (brown) */ --accent:#fd6481; /* button & highlight (pink) */ --ink:#111; /* main text */ --muted:#888; /* muted text on dark */ --bg:#faf8f6; /* light bg in other sections */ --card:#ffffff; /* white card */ --ring:rgba(78,52,46,.12); /* soft shadow */ --maxw:1200px; } /* ===== Footer ===== */ .site-footer{ background: #241915; /* deep brand-like brown */ color: #f5efec; padding-top: 48px; } .site-footer .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 16px; } .footer-grid{ display:grid; grid-template-columns: 1.1fr 0.6fr 0.9fr; gap: 28px; align-items:flex-start; } /* Brand / logo */ .logo-wrap{ margin-bottom: 12px; } .logo{ width: 180px; height: auto; display:block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.2)); } .tagline{ margin:8px 0 14px; color:#dfd6d2; line-height:1.45; max-width: 44ch; } /* Social */ .social{ display:flex; gap:10px; } .social-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); color:#fff; text-decoration:none; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15); } .social-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); } /* Column titles */ .col-title{ margin: 6px 0 10px; font-size: 18px; color: #fff; letter-spacing:.2px; } /* Link list */ .link-list{ list-style:none; margin:0; padding:0; } .link-list li{ margin: 6px 0; } .link-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease, transform .12s ease; display:inline-flex; align-items:center; gap:8px; } .link-list a:before{ content: "›"; opacity:.5; } .link-list a:hover{ color: var(--accent); transform: translateX(2px); } /* Contact */ .contact-list{ list-style:none; margin: 0 0 14px; padding:0; } .contact-list li{ display:flex; gap:10px; align-items:center; margin:8px 0; } .contact-list i{ width:18px; text-align:center; opacity:.8; } .contact-list a{ color:#e9e2df; text-decoration:none; transition: color .12s ease; } .contact-list a:hover{ color: var(--accent); } .cta-row{ margin-top: 8px; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; text-decoration:none; font-weight:700; border:2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s, color .12s; box-shadow:0 6px 18px var(--ring); } .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--ring); } .btn:active{ transform:translateY(0); } .btn-primary{ background: var(--accent); color:#fff; } /* Legal bar */ .legal-bar{ margin-top: 36px; background: #1d1411; color:#cfc6c3; } .legal-wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 14px 16px; } .legal-links{ display:flex; align-items:center; gap:10px; } .legal-links a{ color:#cfc6c3; text-decoration:none; transition: color .12s ease; } .legal-links a:hover{ color:#fff; } .legal-links .sep{ opacity:.4; } /* Responsive */ @media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } .logo{ width: 160px; } .legal-wrap{ flex-direction: column; gap:6px; text-align:center; } } @media (max-width: 639px) { .gp-component-id-0pkjRHpdZ[data-gp-component] { border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;background-color: rgba(211, 216, 222, 0.9);padding-left: 28px;padding-right: 28px;padding-top: 28px;padding-bottom: 28px;width: 85.71%;flex-direction: column;align-items: center;display: flex; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-0pkjRHpdZ[data-gp-component] { border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;background-color: rgba(211, 216, 222, 0.9);padding-left: 48px;padding-right: 48px;padding-top: 48px;padding-bottom: 48px;width: 85.71%;flex-direction: column;align-items: center;display: flex; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-0pkjRHpdZ[data-gp-component] { border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;background-color: rgba(211, 216, 222, 0.9);padding-left: 48px;padding-right: 48px;padding-top: 48px;padding-bottom: 48px;width: 85.71%;flex-direction: column;align-items: center;display: flex; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-0pkjRHpdZ[data-gp-component] { border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;background-color: rgba(211, 216, 222, 0.9);padding-left: 80px;padding-right: 80px;padding-top: 80px;padding-bottom: 80px;width: 80%;flex-direction: column;align-items: center;display: flex; } } @media (min-width: 1200px) { .gp-component-id-0pkjRHpdZ[data-gp-component] { border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;background-color: rgba(211, 216, 222, 0.9);padding-left: 80px;padding-right: 80px;padding-top: 80px;padding-bottom: 80px;width: 80%;flex-direction: column;align-items: center;display: flex; } } @media (max-width: 639px) { .gp-component-id-lMwFhXwMmK[data-gp-component] { background-color: rgba(256, 256, 256, 0);margin-left: auto;margin-right: auto;width: 100%;flex-direction: column;align-items: center;display: flex; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-lMwFhXwMmK[data-gp-component] { background-color: rgba(256, 256, 256, 0);margin-left: auto;margin-right: auto;width: 100%;max-width: 640px;flex-direction: column;align-items: center;display: flex; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-lMwFhXwMmK[data-gp-component] { background-color: rgba(256, 256, 256, 0);margin-left: auto;margin-right: auto;width: 100%;max-width: 768px;flex-direction: column;align-items: center;display: flex; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-lMwFhXwMmK[data-gp-component] { background-color: rgba(256, 256, 256, 0);margin-left: auto;margin-right: auto;width: 100%;max-width: 992px;flex-direction: column;align-items: center;display: flex; } } @media (min-width: 1200px) { .gp-component-id-lMwFhXwMmK[data-gp-component] { background-color: rgba(256, 256, 256, 0);margin-left: auto;margin-right: auto;width: 100%;max-width: 1200px;flex-direction: column;align-items: center;display: flex; } } @media (max-width: 639px) { [data-gp-text] .gp-component-id-0AorX5ZnGN { font-size: 16px;color: rgba(57, 75, 86, 0.8);text-align: center;line-height: 2;margin-bottom: 20px;box-sizing: border-box;cursor: text; } } @media (max-width: 767px) and (min-width: 640px) { [data-gp-text] .gp-component-id-0AorX5ZnGN { font-size: 16px;color: rgba(57, 75, 86, 0.8);text-align: center;line-height: 2;margin-bottom: 20px;box-sizing: border-box;cursor: text; } } @media (max-width: 991px) and (min-width: 768px) { [data-gp-text] .gp-component-id-0AorX5ZnGN { font-size: 16px;color: rgba(57, 75, 86, 0.8);text-align: center;line-height: 2;margin-bottom: 20px;box-sizing: border-box;cursor: text; } } @media (max-width: 1199px) and (min-width: 992px) { [data-gp-text] .gp-component-id-0AorX5ZnGN { font-size: 16px;color: rgba(57, 75, 86, 0.8);text-align: center;line-height: 2;margin-bottom: 20px;box-sizing: border-box;cursor: text; } } @media (min-width: 1200px) { [data-gp-text] .gp-component-id-0AorX5ZnGN { font-size: 16px;color: rgba(57, 75, 86, 0.8);text-align: center;line-height: 2;margin-bottom: 20px;box-sizing: border-box;cursor: text; } } [data-gp-text] .gp-component-id-VXtfd8ndx4 { font-size: 3rem; color: rgba(32, 45, 60, 1); text-align: center; margin-bottom: 2rem; box-sizing: border-box; cursor: text; } @media (min-width: 640px) { [data-gp-text] .gp-component-id-VXtfd8ndx4 { font-size: 3rem; color: rgba(32, 45, 60, 1); text-align: center; margin-bottom: 2rem; } } @media (min-width: 768px) { [data-gp-text] .gp-component-id-VXtfd8ndx4 { font-size: 3rem; color: rgba(32, 45, 60, 1); text-align: center; margin-bottom: 2rem; } } @media (min-width: 992px) { [data-gp-text] .gp-component-id-VXtfd8ndx4 { font-size: 3rem; color: rgba(32, 45, 60, 1); text-align: center; margin-bottom: 2rem; } } @media (min-width: 1200px) { [data-gp-text] .gp-component-id-VXtfd8ndx4 { font-size: 3rem; color: rgba(32, 45, 60, 1); text-align: center; margin-bottom: 2rem; } } .gp-component-id-PQF_jdB6_[data-gp-component] { width: 100%; flex-direction: column; align-items: center; display: flex; } @media (min-width: 640px) { .gp-component-id-PQF_jdB6_[data-gp-component] { width: 100%; flex-direction: column; align-items: center; display: flex; } } @media (min-width: 768px) { .gp-component-id-PQF_jdB6_[data-gp-component] { width: 100%; flex-direction: column; align-items: center; display: flex; } } @media (min-width: 992px) { .gp-component-id-PQF_jdB6_[data-gp-component] { width: 85.71%; flex-direction: column; align-items: center; display: flex; } } @media (min-width: 1200px) { .gp-component-id-PQF_jdB6_[data-gp-component] { width: 85.71%; flex-direction: column; align-items: center; display: flex; } } .gp-component-id-DuK0EsrBY[data-gp-component] { background-image: url("https://assets.grooveapps.com/images/5ed66fb46b90b50c55d241c9/1604044875_austin-distel-wD1LRb9OeEo-unsplash-pichi.jpg"); background-size: cover; background-attachment: fixed; padding-top: 6rem; padding-bottom: 6rem; z-index: auto !important; position: relative; } @media (min-width: 640px) { .gp-component-id-DuK0EsrBY[data-gp-component] { background-image: url("https://assets.grooveapps.com/images/5ed66fb46b90b50c55d241c9/1604044875_austin-distel-wD1LRb9OeEo-unsplash-pichi.jpg"); background-size: cover; background-attachment: fixed; padding-top: 6rem; padding-bottom: 6rem; } } @media (min-width: 768px) { .gp-component-id-DuK0EsrBY[data-gp-component] { background-image: url("https://assets.grooveapps.com/images/5ed66fb46b90b50c55d241c9/1604044875_austin-distel-wD1LRb9OeEo-unsplash-pichi.jpg"); background-size: cover; background-attachment: fixed; padding-top: 6rem; padding-bottom: 6rem; } } @media (min-width: 992px) { .gp-component-id-DuK0EsrBY[data-gp-component] { background-image: url("https://assets.grooveapps.com/images/5ed66fb46b90b50c55d241c9/1604044875_austin-distel-wD1LRb9OeEo-unsplash-pichi.jpg"); background-size: cover; background-attachment: fixed; padding-top: 6rem; padding-bottom: 6rem; } } @media (min-width: 1200px) { .gp-component-id-DuK0EsrBY[data-gp-component] { background-image: url("https://assets.grooveapps.com/images/5ed66fb46b90b50c55d241c9/1604044875_austin-distel-wD1LRb9OeEo-unsplash-pichi.jpg"); background-size: cover; background-attachment: fixed; padding-top: 6rem; padding-bottom: 6rem; } } @media (max-width: 639px) { .gp-component-id-TGZJkpkZE[data-gp-component] { font-size: 1px !important;color: rgba(220, 24, 24, 0.16);background-color: rgba(155, 93, 229, 0.1);padding-top: 12px;padding-bottom: 12px;z-index: auto !important;position: relative; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-TGZJkpkZE[data-gp-component] { font-size: 1px !important;color: rgba(220, 24, 24, 0.16);background-color: rgba(155, 93, 229, 0.1);padding-top: 12px;padding-bottom: 12px;z-index: auto !important;position: relative; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-TGZJkpkZE[data-gp-component] { font-size: 1px !important;color: rgba(220, 24, 24, 0.16);background-color: rgba(155, 93, 229, 0.1);padding-top: 12px;padding-bottom: 12px;z-index: auto !important;position: relative; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-TGZJkpkZE[data-gp-component] { font-size: 1px !important;color: rgba(220, 24, 24, 0.16);background-color: rgba(155, 93, 229, 0.1);padding-top: 12px;padding-bottom: 12px;z-index: auto !important;position: relative; } } @media (min-width: 1200px) { .gp-component-id-TGZJkpkZE[data-gp-component] { font-size: 1px !important;color: rgba(220, 24, 24, 0.16);background-color: rgba(155, 93, 229, 0.1);padding-top: 12px;padding-bottom: 12px;z-index: auto !important;position: relative; } }