/** * Template Name: iLanding * Template URL: https://bootstrapmade.com/ilanding-bootstrap-landing-page-template/ * Updated: Nov 12 2024 with Bootstrap v5.3.3 * Author: BootstrapMade.com * License: https://bootstrapmade.com/license/ */ /*-------------------------------------------------------------- # Font & Color Variables # Help: https://bootstrapmade.com/color-system/ --------------------------------------------------------------*/ /* ============================================================ FONTS (tokens) ------------------------------------------------------------ Keep these or switch to the recommended set below. ============================================================ */ :root { --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --heading-font: "Nunito", sans-serif; --nav-font: "Inter", sans-serif; } /* ============================================================ THEME: Default (RED) ============================================================ */ :root { /* ===== Global Theme Colors ===== */ --background-color: #ffffff; /* general background */ --default-color: #212529; /* body text */ --heading-color: #2d465e; /* headings */ --accent-color: #b22222; /* primary red (firebrick / gov style) */ --accent-color-dark: #8b1a1a; /* dark red */ --accent-color-light: #d94141; /* lighter red for hover/accents */ --surface-color: #f8f9fa; /* neutral gray surface */ --contrast-color: #ffffff; /* white for contrast */ --border-color: #ccc; --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); /* ===== Navigation Colors ===== */ --nav-text-color: #ffffff; /* default text color on red tabs */ --nav-bg-color: var(--accent-color); /* main nav background */ --nav-hover-bg-color: var(--accent-color-dark); /* hover state for tabs */ --nav-active-bg-color: var(--accent-color-dark); /* active tab */ --nav-border-color: #e5e5e5; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; /* ===== Dropdown Colors ===== */ --nav-dropdown-background-color: #ffffff; /* submenu default background */ --nav-dropdown-color: #212529; /* submenu text color */ --nav-dropdown-hover-bg-color: var(--accent-color); /* hover red */ --nav-dropdown-hover-color: #ffffff; /* white text on hover */ --nav-dropdown-active-bg-color: var(--accent-color-dark); /* active submenu */ --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } /* ============================================================ THEME: DEEP BLUE (trust/stability for gov sites) Usage: ============================================================ */ .theme-deep-blue { --background-color: #ffffff; --default-color: #212529; --heading-color: #1b3b5f; --accent-color: #004080; /* navy blue */ --accent-color-dark: #00264d; /* darker navy */ --accent-color-light: #336699; /* lighter blue for hover */ --surface-color: #f5f7fa; --contrast-color: #ffffff; --border-color: #ccd6e0; --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); --nav-text-color: #ffffff; --nav-bg-color: var(--accent-color); --nav-hover-bg-color: var(--accent-color-dark); --nav-active-bg-color: var(--accent-color-dark); --nav-border-color: #e5e5e5; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #212529; --nav-dropdown-hover-bg-color: var(--accent-color); --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } /* ============================================================ THEME: Emerald Green (Growth & Transparency) Usage: ============================================================ */ .theme-emerald-green { --background-color: #ffffff; --default-color: #212529; --heading-color: #1e3d32; --accent-color: #2e7d32; /* emerald green */ --accent-color-dark: #1b5e20; /* deep forest green */ --accent-color-light: #4caf50; /* lighter hover green */ --surface-color: #f4f9f4; --contrast-color: #ffffff; --border-color: #d0e2d4; --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); --nav-text-color: #ffffff; --nav-bg-color: var(--accent-color); --nav-hover-bg-color: var(--accent-color-dark); --nav-active-bg-color: var(--accent-color-dark); --nav-border-color: #e5e5e5; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #212529; --nav-dropdown-hover-bg-color: var(--accent-color); --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } /* ============================================================ THEME: Royal Purple (Innovation & Dignity) Usage: ============================================================ */ .theme-royal-purple { --background-color: #ffffff; --default-color: #212529; --heading-color: #2d1b4e; --accent-color: #5a2d82; /* royal purple */ --accent-color-dark: #3d1a5f; /* deep purple */ --accent-color-light: #8e44ad; /* brighter hover purple */ --surface-color: #f8f5fa; --contrast-color: #ffffff; --border-color: #d8cce5; --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); --nav-text-color: #ffffff; --nav-bg-color: var(--accent-color); --nav-hover-bg-color: var(--accent-color-dark); --nav-active-bg-color: var(--accent-color-dark); --nav-border-color: #e5e5e5; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #212529; --nav-dropdown-hover-bg-color: var(--accent-color); --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } /* ======================================================================= THEME: Two-Color [Blue + Gray] (Simple, Professional, and Consistent) Usage: ==================================================================== */ .theme-blue-gray { /* ===== Global Theme Colors ===== */ --background-color: #ffffff; /* white background */ --default-color: #2b2b2b; /* body text gray */ --heading-color: #2b2b2b; /* headings same gray */ --accent-color: #0056b3; /* strong blue */ --accent-color-dark: #003d80; /* darker blue */ --accent-color-light: #1f75d4; /* lighter hover blue */ --surface-color: #f5f5f5; /* neutral surface gray */ --contrast-color: #ffffff; /* white text on blue */ --border-color: #d1d1d1; /* light gray borders */ --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); /* ===== Navigation Colors ===== */ --nav-text-color: #ffffff; /* text white */ --nav-bg-color: var(--accent-color); /* blue nav */ --nav-hover-bg-color: var(--accent-color-dark); --nav-active-bg-color: var(--accent-color-dark); --nav-border-color: #d1d1d1; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; /* ===== Dropdown Colors ===== */ --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #2b2b2b; --nav-dropdown-hover-bg-color: var(--accent-color); --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } .theme-green { /* ===== Global Theme Colors ===== */ --background-color: #ffffff; /* white background */ --default-color: #2b2b2b; /* body text gray */ --heading-color: #2b2b2b; /* headings same gray */ --accent-color: #388e3c; /* strong green */ --accent-color-dark: #2c6b32; /* darker green */ --accent-color-light: #66bb6a; /* lighter hover green */ --surface-color: #f5f5f5; /* neutral surface gray */ --contrast-color: #ffffff; /* white text on green */ --border-color: #d1d1d1; /* light gray borders */ --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); /* ===== Navigation Colors ===== */ --nav-text-color: #ffffff; /* text white */ --nav-bg-color: var(--accent-color); /* green nav */ --nav-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient hover */ --nav-active-bg-color: var( --accent-color-dark ); /* solid dark green on active */ --nav-border-color: #d1d1d1; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; /* ===== Dropdown Colors ===== */ --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #2b2b2b; --nav-dropdown-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient on hover */ --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } .theme-teal { /* ===== Global Theme Colors ===== */ --background-color: #ffffff; /* white background */ --default-color: #2b2b2b; /* body text gray */ --heading-color: #2b2b2b; /* headings same gray */ --accent-color: #00796b; /* strong teal */ --accent-color-dark: #004d40; /* darker teal */ --accent-color-light: #48a999; /* lighter teal (hover effect) */ --surface-color: #f5f5f5; /* neutral surface gray */ --contrast-color: #ffffff; /* white text on teal */ --border-color: #d1d1d1; /* light gray borders */ --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); /* ===== Navigation Colors ===== */ --nav-text-color: #ffffff; /* text white */ --nav-bg-color: var(--accent-color); /* teal nav */ --nav-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient hover */ --nav-active-bg-color: var( --accent-color-dark ); /* solid dark teal on active */ --nav-border-color: #d1d1d1; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; /* ===== Dropdown Colors ===== */ --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #2b2b2b; --nav-dropdown-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient on hover */ --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } .theme-viva-magenta { /* ===== Global Theme Colors ===== */ --background-color: #ffffff; /* white background */ --default-color: #2b2b2b; /* body text gray */ --heading-color: #2b2b2b; /* headings same gray */ --accent-color: #bb2649; /* strong pinkish-red */ --accent-color-dark: #8b1c3b; /* darker pinkish-red */ --accent-color-light: #e24e6e; /* lighter pinkish-red (hover effect) */ --surface-color: #f5f5f5; /* neutral surface gray */ --contrast-color: #ffffff; /* white text on pinkish-red */ --border-color: #d1d1d1; /* light gray borders */ --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); /* ===== Navigation Colors ===== */ --nav-text-color: #ffffff; /* text white */ --nav-bg-color: var(--accent-color); /* pinkish-red nav */ --nav-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient hover */ --nav-active-bg-color: var( --accent-color-dark ); /* solid dark pinkish-red on active */ --nav-border-color: #d1d1d1; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; /* ===== Dropdown Colors ===== */ --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #2b2b2b; --nav-dropdown-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient on hover */ --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } .theme-spring { /* ===== Global Theme Colors ===== */ --background-color: #ffffff; /* white background */ --default-color: #2b2b2b; /* body text gray */ --heading-color: #2b2b2b; /* headings same gray */ --accent-color: #66bb6a; /* fresh green */ --accent-color-dark: #388e3c; /* darker green */ --accent-color-light: #81c784; /* light green (hover effect) */ --surface-color: #f5f5f5; /* neutral surface gray */ --contrast-color: #ffffff; /* white text on green */ --border-color: #d1d1d1; /* light gray borders */ --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); /* ===== Navigation Colors ===== */ --nav-text-color: #ffffff; /* text white */ --nav-bg-color: var(--accent-color); /* green nav */ --nav-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient hover */ --nav-active-bg-color: var( --accent-color-dark ); /* solid dark green on active */ --nav-border-color: #d1d1d1; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; /* ===== Dropdown Colors ===== */ --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #2b2b2b; --nav-dropdown-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient on hover */ --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } .theme-summer { /* ===== Global Theme Colors ===== */ --background-color: #ffffff; /* white background */ --default-color: #2b2b2b; /* body text gray */ --heading-color: #2b2b2b; /* headings same gray */ --accent-color: #fbc02d; /* vibrant yellow */ --accent-color-dark: #f57f17; /* darker yellow-orange */ --accent-color-light: #ffeb3b; /* light yellow (hover effect) */ --surface-color: #f5f5f5; /* neutral surface gray */ --contrast-color: #ffffff; /* white text on yellow */ --border-color: #d1d1d1; /* light gray borders */ --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); /* ===== Navigation Colors ===== */ --nav-text-color: #ffffff; /* text white */ --nav-bg-color: var(--accent-color); /* yellow nav */ --nav-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient hover */ --nav-active-bg-color: var( --accent-color-dark ); /* solid dark yellow on active */ --nav-border-color: #d1d1d1; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; /* ===== Dropdown Colors ===== */ --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #2b2b2b; --nav-dropdown-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient on hover */ --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } .theme-autumn { /* ===== Global Theme Colors ===== */ --background-color: #ffffff; /* white background */ --default-color: #2b2b2b; /* body text gray */ --heading-color: #2b2b2b; /* headings same gray */ --accent-color: #e64a19; /* deep autumn orange-red */ --accent-color-dark: #bf360c; /* darker burnt orange */ --accent-color-light: #ff7043; /* lighter orange (hover effect) */ --surface-color: #f5f5f5; /* neutral surface gray */ --contrast-color: #ffffff; /* white text on red */ --border-color: #d1d1d1; /* light gray borders */ --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); /* ===== Navigation Colors ===== */ --nav-text-color: #ffffff; /* text white */ --nav-bg-color: var(--accent-color); /* orange-red nav */ --nav-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient hover */ --nav-active-bg-color: var( --accent-color-dark ); /* solid dark red-orange on active */ --nav-border-color: #d1d1d1; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; /* ===== Dropdown Colors ===== */ --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #2b2b2b; --nav-dropdown-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient on hover */ --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } .theme-winter { /* ===== Global Theme Colors ===== */ --background-color: #ffffff; /* white background */ --default-color: #2b2b2b; /* body text gray */ --heading-color: #2b2b2b; /* headings same gray */ --accent-color: #0288d1; /* icy blue */ --accent-color-dark: #01579b; /* deeper blue */ --accent-color-light: #81d4fa; /* light icy blue (hover effect) */ --surface-color: #f5f5f5; /* neutral surface gray */ --contrast-color: #ffffff; /* white text on blue */ --border-color: #d1d1d1; /* light gray borders */ --border-color-focused: color-mix( in srgb, var(--accent-color), transparent 25% ); /* ===== Navigation Colors ===== */ --nav-text-color: #ffffff; /* text white */ --nav-bg-color: var(--accent-color); /* blue nav */ --nav-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient hover */ --nav-active-bg-color: var( --accent-color-dark ); /* solid dark blue on active */ --nav-border-color: #d1d1d1; --nav-mobile-color: var(--default-color); --nav-mobile-background-color: #ffffff; /* ===== Dropdown Colors ===== */ --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #2b2b2b; --nav-dropdown-hover-bg-color: linear-gradient( 135deg, var(--accent-color-light), var(--accent-color-dark) ); /* gradient on hover */ --nav-dropdown-hover-color: #ffffff; --nav-dropdown-active-bg-color: var(--accent-color-dark); --nav-dropdown-active-color: #ffffff; --nav-mobile-dropdown-hover-color: var(--accent-color); } /* ============================================================ COLOR PRESETS (theme-aware) Apply these to sections or containers. They derive from the active theme variables above. ============================================================ */ /* Soft, light-tinted section using current theme */ .light-background { /* very light tint of accent; stays subtle across themes */ --background-color: color-mix(in srgb, var(--accent-color) 6%, #ffffff); --surface-color: #ffffff; /* keep text readable on light backgrounds */ --default-color: var(--default-color); --heading-color: color-mix(in srgb, var(--heading-color) 85%, #000 15%); --contrast-color: #ffffff; } /* High-contrast section using current theme */ .dark-background { /* dark panel in the brand accent */ --background-color: var(--accent-color); --default-color: #ffffff; --heading-color: #ffffff; /* pale surface derived from accent for cards inside dark sections */ --surface-color: color-mix(in srgb, var(--accent-color) 15%, #ffffff 85%); --contrast-color: #ffffff; } /* smooth scroll */ :root { scroll-behavior: smooth; } /*-------------------------------------------------------------- # General Styling & Shared Classes --------------------------------------------------------------*/ body { color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font); } body, html { margin: 0; padding: 0; overflow-x: hidden; } a { color: var(--accent-color); text-decoration: none; transition: 0.3s; } a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-family: var(--heading-font); } .col-1of2 { flex: 0 0 50%; max-width: 50%; } .col-1of3 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-1of4 { flex: 0 0 25%; max-width: 25%; } .col-1of5 { flex: 0 0 20%; max-width: 20%; } .col-1of6 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-1of7 { flex: 0 0 14.2857%; max-width: 14.2857%; } /* Large tablets / smaller desktops: 4 per row */ @media (max-width: 1399px) { .col-1of7 { flex: 0 0 25%; /* 4 per row */ max-width: 25%; } } /* Tablets: 3 per row */ @media (max-width: 1199px) { .col-1of6 { flex: 0 0 33.3333%; /* 3 per row */ max-width: 33.3333%; } } @media (max-width: 991px) { .col-1of5 { flex: 0 0 33.3333%; /* 3 per row */ max-width: 33.3333%; } } /* Small screens: 2 per row */ @media (max-width: 767px) { .col-1of3, .col-1of4, .col-1of5, .col-1of6, .col-1of7 { flex: 0 0 50%; max-width: 50%; } } /* Extra small: 1 per row */ @media (max-width: 480px) { .col-1of2, .col-1of3, .col-1of4, .col-1of5, .col-1of6, .col-1of7 { flex: 0 0 100%; max-width: 100%; text-align: center; } } /* Primary Button */ .btn-primary { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--contrast-color); padding: 0.75rem 2.5rem; border-radius: 5px; font-weight: 500; transition: all 0.3s ease; } .btn-primary:hover { background-color: color-mix(in srgb, var(--accent-color), black 20%); border-color: color-mix(in srgb, var(--accent-color), black 20%); } /* Outline Button */ .btn-outline { background-color: var(--contrast-color); border-color: var(--border-color); color: var(--default-color); padding: 0.75rem 2.5rem; border-radius: 5px; font-weight: 500; transition: all 0.3s ease; } .btn-outline:hover { background-color: var(--contrast-color); border-color: color-mix(in srgb, var(--accent-color), black 20%); color: color-mix(in srgb, var(--accent-color), black 20%); } /*-------------------------------------------------------------- # Global Header --------------------------------------------------------------*/ .header { width: 100%; background: var(--surface-color); position: relative; z-index: 1100; } .header-main { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: end !important; min-height: 60px; width: 100%; padding: 0 0; box-sizing: border-box; } .header-container { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* background-color: var(--surface-color) !important; IF YOU WANT ANOTHER HEAD COLOR*/ } /* Left cell (logo) */ .header-left { display: flex; align-items: flex-end; justify-self: start; margin-left: -35px; height:60px; } /* Right cell (login/search) */ .header-right { display: flex; align-items: flex-end; justify-self: end; margin-right: -35px; } /* Vertical divider */ .header-divider { display: inline-block; width: 1px; height: 24px; background-color: var(--accent-color-light); flex-shrink: 0; } /* Logo */ .nav-logo { max-height: 70px; position: relative; z-index: 1200; top: 22px; width: 80px; background-color: white; padding: 3px; border-radius: 35px; /* For a badge look */ /* border-radius: 29px; */ /* box-shadow: 0 6px 6px rgba(0, 0, 0, 0.05); */ } /* --- Menu (Desktop) --- */ @media (min-width: 1400px) { .navmenu { justify-self: center; align-self: end; } .navmenu ul { display: flex; align-items: flex-end !important; justify-content: center; flex-wrap: nowrap; gap: 0.2rem; list-style: none; margin: 0; padding: 0; height: 100%; } .navmenu > ul > li { width: 140px; } .navmenu > ul > li > a { background: var(--nav-bg-color); color: var(--nav-text-color) !important; padding: 10px 14px; border-radius: 4px 4px 0 0; font-size: 15px; line-height: 1; display: flex; align-items: flex-end !important; height: 100%; transition: background-color 0.3s, color 0.3s; border: 1px solid var(--nav-bg-color); align-items: center; justify-content: center; gap: 2px; } /* Active or focused menu item */ .navmenu > ul > li > a:focus, .navmenu > ul > li.active > a { background-color: var(--nav-active-bg-color); border-color: var(--nav-active-bg-color); color: var(--nav-text-color) !important; } /* Hover state */ .navmenu > ul > li > a:hover { background: var(--accent-color-light); color: var(--nav-text-color) !important; } /* Dropdown */ .navmenu ul ul { display: none; position: absolute; top: 100%; left: 0; background: var(--nav-dropdown-background-color); padding: 0; width: 140px; } .navmenu li:hover > ul { display: block !important; } .navmenu ul ul li:first-child { border-top: 1px solid var(--nav-border-color); } .navmenu ul ul li a { display: block; padding: 10px 14px; color: var(--nav-dropdown-color); border-bottom: 1px solid var(--accent-color-light); background-color: var(--nav-dropdown-background-color); position: relative; overflow: hidden; z-index: 0; transition: color 0.3s ease; } .navmenu ul ul li a::before { content: ""; position: absolute; inset: 0; background: var(--nav-dropdown-hover-bg-color); opacity: 0; transition: opacity 0.25s ease; z-index: -1; } .navmenu ul ul li a:hover::before { opacity: 1; } .navmenu ul ul li a:hover { color: var(--nav-dropdown-hover-color); } /* Dropdown item active (selected) */ .navmenu ul ul li.active > a { background: var(--nav-dropdown-active-bg-color); color: var(--nav-dropdown-active-color); } } /* --- Search Modal (desktop) --- */ /* Header search button */ .header-right .search-toggle-btn { background: none; border: none; padding: 0; margin: 0 8px; font-size: 1.4rem; color: var(--nav-dropdown-color); cursor: pointer; transition: color 0.3s; } .header-right .search-toggle-btn i { vertical-align: middle; } .header-right .search-toggle-btn:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); } /* Header search modal */ .search-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 2000; } .search-modal.active { display: flex; } .search-modal-content { background: var(--surface-color); padding: 30px 20px 15px 20px; border-radius: 6px; width: 95%; max-width: 500px; min-height: 150px; position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } .search-form-modal { width: 100%; display: flex; gap: 8px; align-items: center; justify-content: center; } .search-form-modal input { flex: 1; padding: 8px 10px; border: 1px solid var(--nav-border-color); border-radius: 4px; font-size: 14px; } .search-form-modal input:focus { border-color: var(--accent-color); outline: none; } .search-form-modal button { background: var(--accent-color); border: none; color: #fff; padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: background 0.2s; } .search-form-modal button:hover { background: var(--accent-color-dark); } /* Close search-modal button */ .search-close-btn { position: absolute; top: 12px; right: 12px; background: transparent; border: none; font-size: 20px; cursor: pointer; color: var(--default-color); } /* Hide modal on mobile, keep only desktop */ @media (max-width: 1399px) { .search-modal { display: none !important; } } /* --- Menu (Mobile) --- */ @media (max-width: 1399px) { .header-main { display: flex !important; align-items: center !important; } .nav-logo { top: 0; height: 70px; width: 80px; } .header-left { margin: 3px 0; justify-content: center; } .header-right { display: none !important; } .mobile-nav-toggle { color: var(--nav-mobile-color); font-size: 28px; line-height: 0; margin-right: 10px; cursor: pointer; transition: color 0.3s; z-index: 9999; position: fixed; top: 20px; right: 20px; } .navmenu { padding: 0; z-index: 9997; } .navmenu ul { display: none !important; list-style: none; position: absolute; inset: 60px 20px 20px 20px; padding: 20px; margin: 0; border-radius: 6px; background-color: var(--nav-mobile-background-color); overflow-y: auto; transition: 0.3s; z-index: 9998; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); } .navmenu a, .navmenu a:focus { color: var(--nav-dropdown-color) !important; padding: 10px 20px; font-family: var(--nav-font); font-size: 17px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s; } .navmenu a i, .navmenu a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.3s; background-color: color-mix(in srgb, var(--accent-color), transparent 90%); } .navmenu a i:hover, .navmenu a:focus i:hover { background-color: var(--accent-color); color: var(--contrast-color); } .navmenu a:hover, .navmenu .active, .navmenu .active:focus { color: var(--nav-mobile-dropdown-hover-color) !important; } .navmenu > ul > li > a:focus, .navmenu > ul > li.active > a { background-color: var(--nav-active-bg-color); color: var(--nav-text-color) !important; } .navmenu .active i, .navmenu .active:focus i { background-color: var(--accent-color); color: var(--contrast-color); transform: rotate(180deg); } .navmenu .dropdown ul { position: static; display: none !important; z-index: 99; padding: 10px 0; margin: 10px 20px; background-color: var(--nav-dropdown-background-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); box-shadow: none; transition: all 0.5s ease-in-out; } .navmenu .dropdown ul ul { background-color: rgba(33, 37, 41, 0.1); } .navmenu .dropdown > .dropdown-active { display: block !important; background-color: rgba(33, 37, 41, 0.03); } .navmenu ul ul li.active > a { background: var(--nav-dropdown-active-bg-color); color: var(--nav-dropdown-active-color) !important; } .mobile-nav-active { overflow: hidden; } .mobile-nav-active .navmenu { position: fixed; overflow: hidden; inset: 0; background: rgba(33, 37, 41, 0.8); transition: 0.3s; } .mobile-nav-active .navmenu > ul { display: block !important; } /* Horizontal divider for mobile menu */ .navmenu ul li.mobile-divider { flex-basis: 100%; height: 2px; margin: 0.5rem 0; background: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) ); } /* Mobile login + search inside menu */ .navmenu ul li.mobile-login, .navmenu ul li.mobile-search { display: block; width: 100%; } /* Mobile login */ .navmenu ul li.mobile-login { padding: 16px 0; } .navmenu ul li.mobile-login a { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 20px; color: var(--nav-dropdown-color) !important; font-weight: 500; text-decoration: none; transition: color 0.3s ease, fill 0.3s ease; } .navmenu ul li.mobile-login a i { font-size: 20px; transition: color 0.3s, fill 0.3s; } .navmenu ul li.mobile-login a:hover { color: var(--accent-color) !important; } .navmenu ul li.mobile-login a:focus, .navmenu ul li.mobile-logine > a { background-color: var(--contrast-color); } /* Mobile Search Form*/ .navmenu ul li.mobile-search { display: block !important; width: 100%; padding: 20px 20px; } .navmenu ul li.mobile-search .search-form { display: flex; width: 100%; } .navmenu ul li.mobile-search .search-form input { flex: 1; padding: 8px 10px; border: 1px solid var(--nav-border-color); border-radius: 4px 0 0 4px; font-size: 15px; } .navmenu ul li.mobile-search .search-form button { padding: 8px 10px; border: 1px solid #ccc; border-left: none; border-radius: 0 4px 4px 0; background: var(--accent-color); color: var(--contrast-color); cursor: pointer; } } /* --- Responsive spacing for very wide screens --- */ @media (min-width: 1400px) { .header-main { padding: 0 0 !important; } } @media (min-width: 1600px) { .header-main { padding: 0 0 !important; } } @media (min-width: 1800px) { .header-main { padding: 0 0 !important; } } /*-------------------------------------------------------------- # Global Footer --------------------------------------------------------------*/ .footer { color: var(--default-color); background-color: var(--background-color); font-size: 14px; position: relative; border-top: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05); } .footer .footer-top { padding-top: 50px; } .footer .footer-about .logo { line-height: 1; margin-bottom: 25px; } .footer .footer-about .logo img { max-height: 40px; margin-right: 6px; } .footer .footer-about .logo span { color: var(--heading-color); font-family: var(--heading-font); font-size: 26px; font-weight: 700; letter-spacing: 1px; } .footer .footer-about p { font-size: 14px; font-family: var(--heading-font); } .footer .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%); font-size: 16px; color: color-mix(in srgb, var(--default-color), transparent 20%); margin-right: 10px; transition: 0.3s; } .footer .social-links a:hover { color: var(--accent-color); border-color: var(--accent-color); } .footer h4 { font-size: 16px; font-weight: bold; position: relative; padding-bottom: 12px; } .footer .footer-links { margin-bottom: 30px; } .footer .footer-links ul { list-style: none; padding: 0; margin: 0; } .footer .footer-links ul i { padding-right: 2px; font-size: 12px; line-height: 0; } .footer .footer-links ul li { padding: 10px 0; display: flex; align-items: center; } .footer .footer-links ul li:first-child { padding-top: 0; } .footer .footer-links ul a { color: color-mix(in srgb, var(--default-color), transparent 30%); display: inline-block; line-height: 1; } .footer .footer-links ul a:hover { color: var(--accent-color); } .footer .footer-contact p { margin-bottom: 5px; } .footer .copyright { padding: 25px 0; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .footer .copyright p { margin-bottom: 0; } .footer .credits { margin-top: 8px; font-size: 13px; } .footer .footer-newsletter h4 { font-size: 24px; } .footer .footer-newsletter p { font-size: 14px; font-family: var(--heading-font); } .footer .footer-newsletter .newsletter-form { margin-top: 30px; margin-bottom: 15px; padding: 6px 8px; position: relative; background-color: var(--surface-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1); display: flex; transition: 0.3s; border-radius: 50px; } .footer .footer-newsletter .newsletter-form:focus-within { border-color: color-mix(in srgb, var(--accent-color), transparent 25%); } .footer .footer-newsletter .newsletter-form input[type="email"] { border: 0; padding: 4px; width: 100%; background-color: var(--surface-color); color: var(--default-color); } .footer .footer-newsletter .newsletter-form input[type="email"]:focus-visible { outline: none; } .footer .footer-newsletter .newsletter-form button[type="submit"] { border: 0; font-size: 16px; padding: 0 20px; margin: -7px -8px -7px 0; background: var(--accent-color); color: var(--contrast-color); transition: 0.3s; border-radius: 50px; } .footer .footer-newsletter .newsletter-form button[type="submit"]:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); } /*-------------------------------------------------------------- # Scroll Top Button --------------------------------------------------------------*/ .scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: -15px; z-index: 99999; background-color: var(--accent-color); width: 44px; height: 44px; border-radius: 50px; transition: all 0.4s; } .scroll-top i { font-size: 24px; color: var(--contrast-color); line-height: 0; } .scroll-top:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 20%); color: var(--contrast-color); } .scroll-top.active { visibility: visible; opacity: 1; bottom: 15px; } /*-------------------------------------------------------------- # Disable aos animation delay on mobile devices --------------------------------------------------------------*/ @media screen and (max-width: 768px) { [data-aos-delay] { transition-delay: 0 !important; } } /*-------------------------------------------------------------- # Global Page Titles & Breadcrumbs --------------------------------------------------------------*/ .page-title { color: var(--default-color); background-color: var(--background-color); padding: 32px 0 8px 0; text-align: center; position: relative; } .page-title h1 { font-size: 42px; font-weight: 700; margin-bottom: 10px; } .page-title .breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; justify-content: center; padding: 0; margin: 0; font-size: 16px; font-weight: 400; } .page-title .breadcrumbs ol li + li { padding-left: 10px; } .page-title .breadcrumbs ol li + li::before { content: "/"; display: inline-block; padding-right: 10px; color: color-mix(in srgb, var(--default-color), transparent 70%); } /*-------------------------------------------------------------- # Global Sections --------------------------------------------------------------*/ section, .section { color: var(--default-color); background-color: var(--background-color); padding: 48px 0 60px 0; scroll-margin-top: 90px; overflow: clip; } @media (max-width: 1399px) { section, .section { scroll-margin-top: 66px; } } /*-------------------------------------------------------------- # Global Section Titles --------------------------------------------------------------*/ .section-title { text-align: center; padding-bottom: 60px; position: relative; } .section-title h2 { font-size: 32px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; position: relative; } .section-title h2:after { content: ""; position: absolute; display: block; width: 50px; height: 3px; background: var(--accent-color); left: 0; right: 0; bottom: 0; margin: auto; } .section-title p { margin-bottom: 0; } /*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/ .hero { position: relative; width: 100%; min-height: 400px; overflow: hidden; z-index: 0; } .hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at center, rgba(0, 0, 0, 0.5), transparent 70% ); z-index: 0; } .hero .welcome h2 { margin: 0; font-size: 2rem; font-weight: 700; text-align: center; } .hero .hero-content { position: relative; z-index: 1; } .hero .hero-content h2 { font-size: 2rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem; color: var(--surface-color); } .hero .hero-content h2 .accent-text { color: var(--accent-color); } .hero .hero-content p { color: var(--contrast-color); } @media (max-width: 992px) { .hero .hero-content { text-align: center; margin-bottom: 3rem; } .hero .hero-content h2 { font-size: 1.5rem; } .hero .hero-content .hero-buttons { justify-content: center; } } @media (max-width: 575px) { .hero .hero-content h2 { font-size: 1rem; } } .hero .swiper-pagination { margin-top: 20px; position: relative; } .hero .news-swiper { margin-bottom: 48px; } .hero .company-badge { display: inline-flex; align-items: center; padding: 0.5rem 1rem; background-color: color-mix(in srgb, var(--contrast-color), transparent 40%); border-radius: 50px; color: var(--accent-color); font-weight: 500; border: 1px solid var(--accent-color); } .hero .company-badge i { font-size: 1.25rem; } .hero .btn-link { color: var(--heading-color); text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .hero .btn-link:hover { color: var(--accent-color); } .hero .btn-link i { font-size: 1.5rem; vertical-align: middle; } .hero .hero-image { position: relative; text-align: center; z-index: 1; width: 100%; height: 320px; overflow: hidden; } .hero .hero-image img { border-radius: 0.25rem; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .hero .customers-badge { position: absolute; bottom: 10px; right: 30px; background-color: var(--surface-color); padding: 1rem; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); max-width: 300px; animation: float-badge 3s ease-in-out infinite; will-change: transform; border: 1px solid var(--accent-color); } .hero .customers-badge .customer-avatars { display: flex; align-items: center; margin-bottom: 0.5rem; } .hero .customers-badge .avatar { width: 35px; height: 35px; border-radius: 50%; border: 2px solid var(--surface-color); margin-left: -8px; } .hero .customers-badge .avatar:first-child { margin-left: 0; } .hero .customers-badge .avatar.more { background-color: var(--accent-color); color: var(--contrast-color); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; } .hero .customers-badge p { font-size: 1.025rem; color: color-mix(in srgb, var(--accent-color), transparent 20%); } @media (max-width: 992px) { .hero .customers-badge { bottom: 10px; right: 10px; max-width: 200px; } } .hero .stats-row { position: relative; z-index: 1; margin-top: 0 !important; background-color: var(--surface-color); border-radius: 5px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); border: 1px solid var(--accent-color); } .hero .stat-box { margin-top: 0; } .hero .stats-row > a { display: contents; text-decoration: none; color: inherit; } .hero .stat-item { display: flex; align-items: center; gap: 1rem; padding: 1.15rem; } .hero .stat-item .stat-icon { flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background-color: color-mix(in srgb, var(--accent-color), transparent 92%); border-radius: 50px; transition: 0.3s; } .hero .stat-item .stat-icon i { font-size: 1.5rem; color: var(--accent-color); } .hero .stat-item:hover .stat-icon { background-color: var(--accent-color); } .hero .stat-item:hover .stat-icon i { color: var(--contrast-color); } .hero .stat-item .stat-content { flex-grow: 1; } .hero .stat-item .stat-content h4 { font-size: 1.25rem; margin-bottom: 0.25rem; font-weight: 600; } .hero .stat-item .stat-content p { font-size: 0.875rem; color: color-mix(in srgb, var(--default-color), transparent 40%); margin: 0; } @media (max-width: 575px) { .hero .stat-item { padding: 1.5rem; } } @keyframes float-badge { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /*-------------------------------------------------------------- # About Section --------------------------------------------------------------*/ .about .about-meta { color: var(--accent-color); font-weight: 600; margin-bottom: 1rem; display: inline-block; } .about .about-title { font-size: 1.75rem; margin-bottom: 1rem; line-height: 1.2; font-weight: 700; } @media (max-width: 992px) { .about .about-title { font-size: 2rem; } } .about .about-description { margin-bottom: 2rem; color: color-mix(in srgb, var(--default-color), transparent 20%); } .about .feature-list-wrapper { margin-bottom: 2rem; } .about .feature-list { list-style: none; padding: 0; margin: 0; } .about .feature-list li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; font-size: 1rem; } .about .feature-list li i { color: var(--accent-color); font-size: 1.25rem; } .about .profile .profile-image { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .about .profile .profile-name { font-size: 1.125rem; margin: 0; } .about .profile .profile-position { color: var(--accent-color); margin: 0; font-size: 0.875rem; } .about .contact-info { padding: 1rem 1.5rem; background-color: var(--surface-color); border-radius: 0.5rem; box-shadow: 0 0 15px rgba(0, 0, 0, 0.06); } .about .contact-info i { color: var(--accent-color); font-size: 1.5rem; } .about .contact-info .contact-label { color: color-mix(in srgb, var(--default-color), transparent 30%); font-size: 0.875rem; margin: 0; } .about .contact-info .contact-number { font-weight: 600; margin: 0; } .about .image-wrapper { position: relative; } @media (max-width: 992px) { .about .image-wrapper { padding-left: 0; margin-top: 3rem; display: flex; flex-direction: column; gap: 2rem; } } @media (max-width: 992px) { .about .image-wrapper .images { display: flex; flex-direction: column; gap: 1.5rem; } } @media (max-width: 992px) { .about .image-wrapper .main-image { margin-left: 0; } } .about .image-wrapper .small-image { position: absolute; top: 20%; left: -10%; width: 45%; border: 8px solid var(--surface-color); } @media (max-width: 992px) { .about .image-wrapper .small-image { position: static; width: 100%; margin: 0 auto; border: 0; } } .about .image-wrapper .experience-badge { position: absolute; bottom: 5%; right: 5%; background-color: var(--accent-color); color: var(--contrast-color); padding: 1.5rem; border-radius: 0.5rem; text-align: center; min-width: 200px; animation: experience-float 3s ease-in-out infinite; } @media (max-width: 992px) { .about .image-wrapper .experience-badge { position: static; width: fit-content; margin: 0 auto; } } .about .image-wrapper .experience-badge h3 { color: var(--contrast-color); font-size: 2.5rem; margin: 0; line-height: 0.5; } .about .image-wrapper .experience-badge h3 span { font-size: 1rem; display: inline-block; margin-left: 0.25rem; } .about .image-wrapper .experience-badge p { margin: 0.5rem 0 0; font-size: 0.875rem; } @keyframes experience-float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /*-------------------------------------------------------------- # Kush-Jemi Section --------------------------------------------------------------*/ .kush-jemi .nav-tabs { border: 0; background-color: color-mix(in srgb, var(--default-color), transparent 96%); display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; padding: 6px; width: auto; } .kush-jemi .nav-item { margin: 0; padding: 0 5px 0 0; } .kush-jemi .nav-item:last-child { padding-right: 0; } .kush-jemi .nav-link { background-color: none; color: var(--heading-color); padding: 10px 30px; transition: 0.3s; border-radius: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 100%; border: 0; margin: 0; } @media (max-width: 468px) { .kush-jemi .nav-link { padding: 8px 20px; } } .kush-jemi .nav-link i { padding-right: 15px; font-size: 48px; } .kush-jemi .nav-link h4 { font-size: 14px; font-weight: 500; margin: 0; } .kush-jemi .nav-link:hover { border-color: color-mix(in srgb, var(--default-color), transparent 80%); } .kush-jemi .nav-link:hover h4 { color: var(--accent-color); } .kush-jemi .nav-link.active { background-color: var(--accent-color); border-color: var(--accent-color); } .kush-jemi .nav-link.active h4 { color: var(--contrast-color); } .kush-jemi .tab-content { margin-top: 30px; } .kush-jemi .tab-pane h3 { color: var(--heading-color); font-weight: 700; font-size: 32px; position: relative; margin-bottom: 20px; padding-bottom: 20px; } .kush-jemi .tab-pane h3:after { content: ""; position: absolute; display: block; width: 60px; height: 3px; background: var(--accent-color); left: 0; bottom: 0; } .kush-jemi .tab-pane ul { list-style: none; padding: 0; } .kush-jemi .tab-pane ul li { padding-top: 10px; } .kush-jemi .tab-pane ul i { font-size: 20px; padding-right: 4px; color: var(--accent-color); } .kush-jemi .tab-pane p:last-child { margin-bottom: 0; } .kush-jemi .section-title { padding-bottom: 0; } /*-------------------------------------------------------------- # Servise Section --------------------------------------------------------------*/ .servise .feature-item .feature-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: color-mix(in srgb, var(--accent-color), transparent 92%); } .servise .feature-item .feature-icon i { font-size: 24px; color: var(--accent-color); } .servise .feature-item .feature-content h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; } .servise .feature-item .feature-content p { color: color-mix(in srgb, var(--default-color), transparent 25%); font-size: 15px; margin-bottom: 0; } .servise .phone-mockup { position: relative; padding: 30px 0; } .servise .phone-mockup img { max-width: 300px; height: auto; filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1)); } @media (max-width: 991.98px) { .servise .feature-item { text-align: center !important; margin-bottom: 2rem; } .servise .feature-item .d-flex { flex-direction: column; text-align: center; justify-content: center !important; } .servise .phone-mockup { margin: 3rem 0; } } /*-------------------------------------------------------------- # Histori Suksesi Section --------------------------------------------------------------*/ .histori-suksesi .testimonial-item { background-color: var(--surface-color); box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.08); padding: 30px; position: relative; height: 100%; } .histori-suksesi .testimonial-item .testimonial-img { width: 90px; border-radius: 50px; border: 6px solid var(--background-color); float: left; margin: 0 10px 0 0; } .histori-suksesi .testimonial-item h3 { font-size: 18px; font-weight: bold; margin: 10px 0 5px 0; } .histori-suksesi .testimonial-item h4 { font-size: 14px; color: color-mix(in srgb, var(--default-color), transparent 20%); margin: 0; } .histori-suksesi .testimonial-item .stars { margin: 10px 0; } .histori-suksesi .testimonial-item .stars i { color: #ffc107; margin: 0 1px; } .histori-suksesi .testimonial-item .quote-icon-left, .histori-suksesi .testimonial-item .quote-icon-right { color: color-mix(in srgb, var(--accent-color), transparent 50%); font-size: 26px; line-height: 0; } .histori-suksesi .testimonial-item .quote-icon-left { display: inline-block; left: -5px; position: relative; } .histori-suksesi .testimonial-item .quote-icon-right { display: inline-block; right: -5px; position: relative; top: 10px; transform: scale(-1, -1); } .histori-suksesi .testimonial-item p { font-style: italic; margin: 15px 0 0 0; padding: 0; } /*-------------------------------------------------------------- # Statistika Section --------------------------------------------------------------*/ .statistika .stats-item { padding: 30px; width: 100%; } .statistika .stats-item span { color: var(--heading-color); font-size: 48px; display: block; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; position: relative; } .statistika .stats-item span:after { content: ""; position: absolute; display: block; width: 25px; height: 3px; background: var(--accent-color); left: 0; right: 0; bottom: 0; margin: auto; } .statistika .stats-item p { color: color-mix(in srgb, var(--default-color), transparent 40%); padding: 0; margin: 0; font-family: var(--heading-font); font-weight: 500; } /*-------------------------------------------------------------- # Services Section --------------------------------------------------------------*/ .services .service-card { height: 100%; padding: 30px; background: var(--surface-color); border-radius: 10px; transition: all 0.3s ease; } .services .service-card:hover { box-shadow: 0 0 15px rgba(0, 0, 0, 0.08); } .services .service-card:hover .icon { background: var(--accent-color); color: var(--contrast-color); } .services .service-card:hover .read-more { color: color-mix(in srgb, var(--accent-color), transparent 25%); } .services .service-card .icon { width: 60px; height: 60px; margin-right: 30px; background: color-mix(in srgb, var(--accent-color), transparent 90%); display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--accent-color); font-size: 28px; transition: all 0.3s ease; line-height: 1; } .services .service-card .custom-icon-size { width: 100px; height: 100px; font-size: 46px; } .services .service-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 15px; } .services .service-card p { margin-bottom: 25px; color: color-mix(in srgb, var(--default-color), transparent 25%); font-size: 15px; line-height: 1.6; } .services .service-card .read-more { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-color); font-weight: 500; transition: all 0.3s ease; } .services .service-card .read-more i { font-size: 14px; transition: transform 0.3s ease; } .services .service-card .read-more:hover i { transform: translateX(5px); } .services .card-shadow { box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); } /*-------------------------------------------------------------- # Documents --------------------------------------------------------------*/ .document-preview { max-width: 700px; border: 1px solid #dee2e6; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); background-color: var(--background-color); } .doc-header { border-bottom: 1px solid #ccc; padding-bottom: 0.75rem; margin-bottom: 1rem; } .doc-title { font-size: 1.25rem; font-weight: 600; color: var(--accent-color); } .doc-body p { font-size: 1rem; margin-bottom: 1.5rem; } /*-------------------------------------------------------------- # Contact Section --------------------------------------------------------------*/ .contact .info-box { background-color: var(--accent-color); color: var(--contrast-color); padding: 3rem; border-radius: 1rem; height: 100%; } .contact .info-box h3 { color: var(--contrast-color); font-size: 2rem; margin-bottom: 1rem; } @media (max-width: 767.98px) { .contact .info-box h3 { font-size: 1.75rem; } } .contact .info-box p { opacity: 0.8; margin-bottom: 2rem; } .contact .info-box a { color: var(--contrast-color); } @media (max-width: 992px) { .contact .info-box { padding: 1.5rem; } } .contact .info-item { display: flex; gap: 1.5rem; margin-bottom: 2rem; } .contact .info-item:last-child { margin-bottom: 0; } .contact .info-item .icon-box { width: 3.5rem; height: 3.5rem; background-color: color-mix(in srgb, var(--contrast-color), transparent 85%); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.3s; } .contact .info-item .icon-box i { font-size: 1.5rem; color: var(--contrast-color); } .contact .info-item:hover .icon-box { background-color: color-mix(in srgb, var(--contrast-color), transparent 70%); } .contact .info-item .content h4 { color: var(--contrast-color); font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: 700; } .contact .info-item .content p { margin-bottom: 0.25rem; font-size: 0.95rem; } .contact .info-item .content p:last-child { margin-bottom: 0; } .contact .contact-form { background-color: var(--surface-color); padding: 3rem; border-radius: 1rem; height: 100%; box-shadow: 0 0 25px rgba(0, 0, 0, 0.05); } @media (max-width: 992px) { .contact .contact-form { padding: 1.5rem; } } .contact .contact-form h3 { font-size: 2rem; margin-bottom: 1rem; } @media (max-width: 768px) { .contact .contact-form h3 { font-size: 1.75rem; } } .contact .contact-form p { color: color-mix(in srgb, var(--default-color), transparent 25%); margin-bottom: 2rem; } .contact .contact-form .form-control, .contact .contact-form .form-select { padding: 0.875rem 1.25rem; border-color: color-mix(in srgb, var(--default-color), transparent 90%); border-radius: 0.5rem; background-color: color-mix(in srgb, var(--surface-color) 90%, white 5%); color: var(--default-color); } .contact .contact-form .form-control:focus, .contact .contact-form .form-select:focus { box-shadow: none; border-color: var(--accent-color); } .contact .contact-form .form-control::placeholder, .contact .contact-form .form-select::placeholder { color: color-mix(in srgb, var(--default-color), transparent 50%); } .contact .contact-form .btn { background-color: var(--accent-color); color: var(--contrast-color); padding: 1rem 2rem; border-radius: 2rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: 0.3s; } .contact .contact-form .btn i { font-size: 1.25rem; } .contact .contact-form .btn:hover { background-color: color-mix( in srgb, var(--accent-color), var(--contrast-color) 20% ); } .contact .sitemap { background-color: var(--surface-color); padding: 0.5rem; border-radius: 1rem; height: 100%; box-shadow: 0 0 25px rgba(0, 0, 0, 0.05); } .contact .map-embed-wrapper { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 1rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } .contact .map-iframe { width: 100%; height: 100%; border: 0; } /*-------------------------------------------------------------- # Search Bar Section --------------------------------------------------------------*/ .search-section { position: relative; width: 240px; } .search-input { width: 100%; padding: 10px 38px 10px 14px; border-radius: 30px; border: 1px solid var(--border-color); font-size: 14px; outline: none; transition: border 0.3s ease; } .search-input:focus { border-color: var(--border-color-focused); } .search-icon { position: absolute; right: 12px; top: 35%; transform: translateY(-50%); color: var(--default-color); font-size: 16px; } /*-------------------------------------------------------------- # Service Details Section --------------------------------------------------------------*/ .service-details .service-box { background-color: var(--surface-color); padding: 20px; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); } .service-details .service-box + .service-box { margin-top: 30px; } .service-details .service-box h4 { font-size: 20px; font-weight: 700; border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%); padding-bottom: 15px; margin-bottom: 15px; } .service-details .services-list { background-color: var(--surface-color); } .service-details .services-list a { color: color-mix(in srgb, var(--default-color), transparent 20%); background-color: color-mix(in srgb, var(--default-color), transparent 96%); display: flex; align-items: center; padding: 12px 15px; margin-top: 15px; transition: all 0.3s ease; border-radius: 6px; text-decoration: none; } .service-details .services-list a:first-child { margin-top: 0; } .service-details .services-list a i { font-size: 18px; margin-right: 10px; color: var(--accent-color); } .service-details .services-list a:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 90%); color: var(--accent-color); transform: translateX(3px); } .service-details .download-catalog a { color: var(--default-color); display: flex; align-items: center; padding: 10px 0; transition: 0.3s; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .service-details .download-catalog a:first-child { border-top: 0; padding-top: 0; } .service-details .download-catalog a:last-child { padding-bottom: 0; } .service-details .download-catalog a i { font-size: 24px; margin-right: 8px; color: var(--accent-color); } .service-details .download-catalog a:hover { color: var(--accent-color); } .service-details .help-box { background-color: var(--accent-color); color: var(--contrast-color); margin-top: 30px; padding: 30px 15px; } .service-details .help-box .help-icon { font-size: 48px; } .service-details .help-box h4, .service-details .help-box a { color: var(--contrast-color); } .service-details .services-img { margin-bottom: 20px; } .service-details h3 { font-size: 26px; font-weight: 700; } .service-details p { font-size: 15px; } .service-details ul { list-style: none; padding: 0; font-size: 15px; } .service-details ul li { padding: 5px 0; display: flex; align-items: center; } .service-details ul i { font-size: 20px; margin-right: 8px; color: var(--accent-color); } .service-details .article-publish-date { font-size: 16px; color: color-mix(in srgb, var(--default-color), transparent 40%); margin-bottom: 10px; } /*-------------------------------------------------------------- # Pagination Section --------------------------------------------------------------*/ .pagination-wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 40px; gap: 12px; } .pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; flex: 1; } .page-link { padding: 6px 12px; border-radius: 6px; background-color: color-mix(in srgb, var(--default-color), transparent 92%); color: var(--default-color); text-decoration: none; font-size: 14px; transition: all 0.3s ease; } .page-link:hover, .page-link.active { background-color: var(--accent-color); color: var(--contrast-color); border-color: var(--accent-color-dark); } .pagination-styled-dropdown { display: flex; align-items: center; gap: 8px; } .pagination-styled-dropdown .form-label { margin-bottom: 0; font-size: 14px; color: var(--default-color); } .pagination-form-select { padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 30px; font-size: 14px; background-color: var(--surface-color); transition: all 0.3s ease; outline: none; appearance: none; /* Custom Arrow */ background-image: url("data:image/svg+xml,%3Csvg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 34px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); } /*-------------------------------------------------------------- # Error Page Section --------------------------------------------------------------*/ .error-page { .text-primary { color: var(--accent-color) !important; } .btn-primary { background-color: var(--default-color); border-color: var(--default-color); } } /*-------------------------------------------------------------- # Category Type Type_1 Section --------------------------------------------------------------*/ .category-type-1 .card-link { text-decoration: none; color: inherit; display: block; } .category-type-1 .category-card { height: 100%; padding: 30px; background: var(--surface-color); border-radius: 10px; transition: all 0.3s ease; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); } .category-type-1 .category-card:hover { box-shadow: 0 0 15px rgba(0, 0, 0, 0.08); } .category-type-1 .category-card:hover .icon { background: var(--accent-color); color: var(--contrast-color); } .category-type-1 .category-card .icon { width: 60px; height: 60px; margin-right: 30px; background: color-mix(in srgb, var(--accent-color), transparent 90%); display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--accent-color); font-size: 28px; transition: all 0.3s ease; line-height: 1; } .category-type-1 .category-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 15px; } .category-type-1 .category-card .custom-icon-size { width: 100px; height: 100px; font-size: 46px; } /*-------------------------------------------------------------- # Category Type Type_2 Section --------------------------------------------------------------*/ .category-type-2 article { background-color: var(--surface-color); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); padding: 30px; height: 100%; border-radius: 10px; overflow: hidden; } .category-type-2 .post-img { max-height: 240px; margin: -30px -30px 15px -30px; overflow: hidden; } .category-type-2 .article-link { display: block; text-decoration: none; color: inherit; transition: transform 0.2s ease; } .category-type-2 .article-link:hover { transform: translateY(-2px); } .category-type-2 .article-link:hover .title { color: var(--accent-color); } .category-type-2 .title { color: var(--heading-color); font-size: 20px; font-weight: 700; margin: 0 0 20px; transition: color 0.3s ease; } .category-type-2 .title-wrapper { display: flex; justify-content: center; align-items: center; height: 48px; } /*-------------------------------------------------------------- # Category Type Type_3 Section --------------------------------------------------------------*/ .category-type-3 .card-link { text-decoration: none; color: inherit; display: block; } .category-type-3 .category-card { height: 100%; padding: 30px; background: color-mix(in srgb, var(--accent-color), transparent 90%); border-radius: 10px; transition: all 0.3s ease; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); } .category-type-3 .category-card:hover { box-shadow: 0 0 15px rgba(0, 0, 0, 0.08); } .category-type-3 .category-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 15px; color: var(--accent-color); } .category-type-3 .category-card:hover { background: color-mix(in srgb, var(--accent-color), transparent 25%); h3 { color: var(--contrast-color); } } /*-------------------------------------------------------------- # List Page Type_1 Section --------------------------------------------------------------*/ .list-page-type-1 .service-box { background-color: var(--surface-color); padding: 20px; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); } .list-page-type-1 .service-box + .service-box { margin-top: 30px; } .list-page-type-1 .service-box h4 { font-size: 20px; font-weight: 700; border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%); padding-bottom: 15px; margin-bottom: 15px; } .list-page-type-1 .services-list { background-color: var(--surface-color); } .list-page-type-1 .services-list a { color: color-mix(in srgb, var(--default-color), transparent 20%); background-color: color-mix(in srgb, var(--default-color), transparent 96%); display: flex; align-items: center; padding: 12px 15px; margin-top: 15px; transition: all 0.3s ease; border-radius: 6px; text-decoration: none; } .list-page-type-1 .services-list a:first-child { margin-top: 0; } .list-page-type-1 .services-list a i { font-size: 18px; margin-right: 10px; color: var(--accent-color); } .list-page-type-1 .services-list a:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 90%); color: var(--accent-color); transform: translateX(3px); } /*-------------------------------------------------------------- # List Page Type_2_and_3 Section --------------------------------------------------------------*/ .list-page-type-2-and-3 .service-box { background-color: var(--surface-color); padding: 20px; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); } .list-page-type-2-and-3 article { background-color: var(--surface-color); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform 0.2s ease; padding: 0; } .list-page-type-2-and-3 .post-publish-date { font-size: 16px; color: color-mix(in srgb, var(--default-color), transparent 40%); margin-bottom: 10px; } /* ----- General Card Layout ----- */ .list-page-type-2-and-3 .clickable-article { background-color: var(--surface-color); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); border-radius: 10px; height: 100%; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; display: flex; flex-direction: column; justify-content: flex-start; } .list-page-type-2-and-3 .clickable-article:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .list-page-type-2-and-3 .clickable-article .stretched-link { position: absolute; inset: 0; z-index: 1; } .list-page-type-2-and-3 .title { font-size: 20px; font-weight: 700; margin-top: 20px; } .list-page-type-2-and-3 .title a { position: relative; z-index: 2; color: var(--heading-color); text-decoration: none; transition: color 0.3s ease; } .list-page-type-2-and-3 .clickable-article:hover .title a { color: var(--accent-color); } .list-page-type-2-and-3 .post-img { height: 240px; overflow: hidden; } .list-page-type-2-and-3 .post-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .list-page-type-2-and-3 article:hover .post-img img { transform: scale(1.03); } .list-page-type-2-and-3 .post-short-description { font-size: 16px; color: color-mix(in srgb, var(--default-color), transparent 40%); margin-top: auto; z-index: 2; } .list-page-type-2-and-3 .title, .list-page-type-2-and-3 .post-short-description { padding: 0 30px 20px 30px; } .list-page-type-2-and-3 .clickable-article.no-desc { justify-content: center; text-align: center; } .list-page-type-2-and-3 .clickable-article.no-desc .title { margin-bottom: 0; } /*-------------------------------------------------------------- # List Images Page Section --------------------------------------------------------------*/ .list-image-page .article-heading { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); font-weight: 700; font-size: 1.5rem; } /*-------------------------------------------------------------- # Article Page Type_0 Section --------------------------------------------------------------*/ .article-page-type-0 .article-heading { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); font-weight: 700; font-size: 1.5rem; } /*.article-page-type-0 p { font-size: 15px; }*/ /*.article-page-type-0 ul { list-style: disc; padding-left: 20px; font-size: 15px; } .article-page-type-0 ul li { padding: 5px 0; display: list-item; } .article-page-type-0 ul i { font-size: 20px; margin-right: 8px; color: var(--accent-color); }*/ /*-------------------------------------------------------------- # Article Page Type_1 Section --------------------------------------------------------------*/ .article-page-type-1 .article-heading { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); font-weight: 700; font-size: 1.5rem; } .article-page-type-1 p { font-size: 15px; } .article-page-type-1 ul { list-style: none; padding: 0; font-size: 15px; } .article-page-type-1 ul li { padding: 5px 0; display: flex; align-items: center; } .article-page-type-1 ul i { font-size: 20px; margin-right: 8px; color: var(--accent-color); } .article-page-type-1 .download-btn { background-color: var(--accent-color); color: var(--contrast-color); border: none; padding: 0.75rem 1.5rem; font-size: 1.1rem; font-weight: 600; border-radius: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease-in-out; } .article-page-type-1 .download-btn:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 15%); color: var(--contrast-color); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } .article-page-type-1 .download-link-box { background-color: var(--contrast-color); padding: 20px; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); } .article-page-type-1 .download-link-box + .download-link-box { margin-top: 30px; } .article-page-type-1 .download-link-box h4 { font-size: 20px; font-weight: 700; border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%); padding-bottom: 15px; margin-bottom: 15px; } .article-page-type-1 .download-link-catalog a { color: var(--default-color); display: flex; align-items: center; padding: 10px 0; transition: 0.3s; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .article-page-type-1 .download-link-catalog a:first-child { border-top: 0; padding-top: 0; } .article-page-type-1 .download-link-catalog a:last-child { padding-bottom: 0; } .article-page-type-1 .download-link-catalog a i { font-size: 24px; margin-right: 8px; color: var(--accent-color); } .article-page-type-1 .download-link-catalog a:hover { color: var(--accent-color); } /*-------------------------------------------------------------- # Article Page Type_2 Section --------------------------------------------------------------*/ .article-page-type-2 .article-heading { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); font-weight: 700; font-size: 1.5rem; text-align: center; } .article-page-type-2 .article-publish-date { font-size: 16px; color: color-mix(in srgb, var(--default-color), transparent 40%); margin-bottom: 10px; } .article-page-type-2 .article-box { background-color: var(--surface-color); padding: 20px; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); } .article-page-type-2 .article-box + .article-box { margin-top: 30px; } .article-page-type-2 .article-box h4 { font-size: 20px; font-weight: 700; border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%); padding-bottom: 15px; margin-bottom: 15px; } .article-page-type-2 .download-catalog a { color: var(--default-color); display: flex; align-items: center; padding: 10px 0; transition: 0.3s; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .article-page-type-2 .download-catalog a:first-child { border-top: 0; padding-top: 0; } .article-page-type-2 .download-catalog a:last-child { padding-bottom: 0; } .article-page-type-2 .download-catalog a i { font-size: 24px; margin-right: 8px; color: var(--accent-color); } .article-page-type-2 .download-catalog a:hover { color: var(--accent-color); } .article-page-type-2 .download-doc-btn { background-color: var(--accent-color); color: var(--contrast-color) !important; border: none; padding: 0.35rem 0.75rem !important; font-size: 0.875rem; font-weight: 500; border-radius: 5px; transition: background-color 0.3s ease, box-shadow 0.3s ease !important; display: inline-flex; align-items: center; gap: 0.4rem; } .article-page-type-2 .download-doc-btn:hover { background-color: var(--accent-color-dark); box-shadow: 0 1px 3px color-mix(in srgb, var(--accent-color), black 20%); text-decoration: none; color: var(--contrast-color); } .article-page-type-2 .download-doc-btn i { color: var(--contrast-color) !important; } .article-page-type-2 .doc-row:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--border-color), transparent 52%); } /*-------------------------------------------------------------- # Article Page Type_3 Section --------------------------------------------------------------*/ .article-page-type-3 h3 { font-size: 26px; font-weight: 700; } .article-page-type-3 .floated-image { max-width: 300px; } .article-page-type-3 .float-start { float: left !important; margin-right: 1.5rem; margin-bottom: 1rem; } .article-page-type-3 .float-end { float: right !important; margin-left: 1.5rem; margin-bottom: 1rem; } .article-page-type-3 p { font-size: 15px; } .article-page-type-3 ul { list-style: none; padding: 0; font-size: 15px; } .article-page-type-3 ul li { padding: 5px 0; display: flex; align-items: center; } .article-page-type-3 ul i { font-size: 20px; margin-right: 8px; color: var(--accent-color); } .article-page-type-3 .article-detail-slider { position: relative; } .article-page-type-3 .article-detail-slider .swiper-slide { height: 400px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .article-page-type-3 .article-detail-slider .swiper-slide img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; } .article-page-type-3 .article-detail-slider .swiper-pagination { position: relative; margin-top: 1.5rem; text-align: center; } .article-page-type-3 .article-detail-slider .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: color-mix(in srgb, var(--default-color), transparent 85%); opacity: 1; } .article-page-type-3 .article-detail-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--accent-color); } /*-------------------------------------------------------------- # Article Page Type_4 Section --------------------------------------------------------------*/ .article-page-type-4 .bulletinSlider { width: 100%; max-width: 1000px; height: auto; margin: 0 auto; position: relative; padding: 40px 0; } .article-page-type-4 .bulletinSlider .swiper-slide { display: flex; justify-content: center; align-items: center; } .article-page-type-4 .bulletinSlider img { width: 100%; height: auto; max-height: 85vh; object-fit: contain; border-radius: 8px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } @media (max-width: 992px) { .article-page-type-4 .bulletinSlider { padding: 20px 0; } .article-page-type-4 .bulletinSlider img { width: 100%; height: auto; max-height: 70vh; } } @media (max-width: 576px) { .article-page-type-4 .bulletinSlider { padding: 15px 0; } .article-page-type-4 .bulletinSlider img { max-height: 60vh; border-radius: 6px; } .article-page-type-4 .swiper-button-prev, .article-page-type-4 .swiper-button-next { display: none; } } /* --- Navigation Buttons --- */ .article-page-type-4 .swiper-button-prev, .article-page-type-4 .swiper-button-next { color: var(--accent-color); transition: opacity 0.2s ease; } .article-page-type-4 .swiper-button-prev:hover, .article-page-type-4 .swiper-button-next:hover { opacity: 0.7; } /*-------------------------------------------------------------- # Article Page Type_5 Section --------------------------------------------------------------*/ .article-page-type-5 h3 { font-weight: 700; font-size: 1.5rem; } .article-page-type-5 .download-btn { background-color: var(--accent-color); color: var(--contrast-color); border: none; padding: 0.75rem 1.5rem; font-size: 1.1rem; font-weight: 600; border-radius: 2rem; transition: all 0.3s ease-in-out; } .article-page-type-5 .download-btn:hover { background-color: var(--accent-color-dark); color: var(--contrast-color); box-shadow: 0 1px 3px color-mix(in srgb, var(--accent-color), black 20%); } /*-------------------------------------------------------------- # Article Page Type_6 Section --------------------------------------------------------------*/ .article-page-type-6 h3 { font-weight: 700; font-size: 1.5rem; } .article-page-type-6 .embedded-content { width: 100%; height: 600px; border: none; } /*-------------------------------------------------------------- # Galeri Section --------------------------------------------------------------*/ .galeri .galeri-filters { padding: 0; margin: 0 auto 20px auto; list-style: none; text-align: center; } .galeri .galeri-filters li { cursor: pointer; display: inline-block; padding: 0; font-size: 18px; font-weight: 500; margin: 0 10px; line-height: 1; margin-bottom: 5px; transition: all 0.3s ease-in-out; } .galeri .galeri-filters li:hover, .galeri .galeri-filters li.filter-active { color: var(--accent-color); } .galeri .galeri-filters li:first-child { margin-left: 0; } .galeri .galeri-filters li:last-child { margin-right: 0; } @media (max-width: 575px) { .galeri .galeri-filters li { font-size: 14px; margin: 0 5px; } } .galeri .galeri-content { position: relative; overflow: hidden; } .galeri .galeri-content img { transition: 0.3s; width: 100%; height: 250px; object-fit: cover; object-position: center; display: block; } .galeri .galeri-content .galeri-info { opacity: 0; position: absolute; inset: 0; z-index: 3; transition: all ease-in-out 0.3s; background: rgba(0, 0, 0, 0.6); padding: 15px; } .galeri .galeri-content .galeri-info h4 { font-size: 14px; padding: 5px 10px; font-weight: 400; color: var(--contrast-color); display: inline-block; background-color: var(--accent-color); } .galeri .galeri-content .galeri-info p { position: absolute; bottom: 10px; text-align: center; display: inline-block; left: 0; right: 0; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.8); } .galeri .galeri-content .galeri-info .preview-link, .galeri .galeri-content .galeri-info .details-link { position: absolute; left: calc(50% - 40px); font-size: 26px; top: calc(50% - 14px); color: var(--contrast-color); transition: 0.3s; line-height: 1.2; } .galeri .galeri-content .galeri-info .preview-link:hover, .galeri .galeri-content .galeri-info .details-link:hover { color: var(--accent-color); } .galeri .galeri-content .galeri-info .details-link { left: 50%; font-size: 34px; line-height: 0; } .galeri .galeri-content:hover .galeri-info { opacity: 1; } .galeri .galeri-content:hover img { transform: scale(1.1); } /*-------------------------------------------------------------- # Portfolio Details Section --------------------------------------------------------------*/ .portfolio-details .portfolio-details-slider img { width: 100%; } .portfolio-details .portfolio-details-slider .swiper-pagination { margin-top: 20px; position: relative; } .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: color-mix(in srgb, var(--default-color), transparent 85%); opacity: 1; } .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--accent-color); } .portfolio-details .portfolio-info { background-color: var(--surface-color); padding: 30px; box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1); } .portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); } .portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px; } .portfolio-details .portfolio-info ul li + li { margin-top: 10px; } .portfolio-details .portfolio-description { padding-top: 30px; } .portfolio-details .portfolio-description h2 { font-size: 26px; font-weight: 700; margin-bottom: 20px; } .portfolio-details .portfolio-description p { padding: 0; color: color-mix(in srgb, var(--default-color), transparent 30%); } /*-------------------------------------------------------------- # Video Modal Section --------------------------------------------------------------*/ .video-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); justify-content: center; align-items: center; } .video-content { position: relative; width: 80%; max-width: 800px; height: 450px; background: #000; } .video-close { position: absolute; top: -30px; right: 0; font-size: 40px; color: #fff; cursor: pointer; font-weight: bold; } /* Pulsating Play Button ------------------------------*/ .pulsating-play-btn { width: 94px; height: 94px; background: radial-gradient( var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52% ); border-radius: 50%; overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; } .pulsating-play-btn:before { content: ""; position: absolute; width: 120px; height: 120px; animation-delay: 0s; animation: pulsate-play-btn 2s; animation-direction: forwards; animation-iteration-count: infinite; animation-timing-function: steps; opacity: 1; border-radius: 50%; border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%); top: -15%; left: -15%; background: rgba(198, 16, 0, 0); } .pulsating-play-btn:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translateX(-40%) translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; z-index: 100; transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } .pulsating-play-btn:hover:before { content: ""; position: absolute; left: 50%; top: 50%; transform: translateX(-40%) translateY(-50%); width: 0; height: 0; border: none; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; z-index: 200; animation: none; border-radius: 0; } .pulsating-play-btn:hover:after { border-left: 15px solid var(--accent-color); transform: scale(20); } @keyframes pulsate-play-btn { 0% { transform: scale(0.6, 0.6); opacity: 1; } 100% { transform: scale(1, 1); opacity: 0; } } /*-------------------------------------------------------------- # Skuadra Section --------------------------------------------------------------*/ .skuadra .member { position: relative; } .skuadra .member .member-img { overflow: hidden; margin-bottom: 50px; } .skuadra .member .member-info { background-color: var(--surface-color); color: color-mix(in srgb, var(--default-color), transparent 20%); box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); position: absolute; bottom: -50px; left: 20px; right: 20px; padding: 20px 15px; overflow: hidden; transition: 0.5s; } .skuadra .member h4 { font-weight: 700; margin-bottom: 10px; font-size: 16px; position: relative; padding-bottom: 10px; } .skuadra .member h4::after { content: ""; position: absolute; display: block; width: 100%; height: 1px; background: color-mix(in srgb, var(--default-color), transparent 60%); bottom: 0; left: 0; } .skuadra .member span { font-style: italic; display: block; font-size: 13px; } .skuadra .member .member-img .social { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 2; padding-bottom: 20px; transition: 0.3s; visibility: hidden; opacity: 0; } .skuadra .member .member-img .social a { transition: 0.3s; color: var(--contrast-color); font-size: 20px; margin: 0 8px; } .skuadra .member .member-img .social a:hover { color: var(--accent-color); } .skuadra .member:hover .member-img .social { padding-bottom: 0; visibility: visible; opacity: 1; } .skuadra .member .member-img .read-more { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 2; transition: 0.3s; visibility: hidden; opacity: 0; } .skuadra .member .member-img .read-more .btn { font-size: 14px; padding: 8px 18px; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); } .skuadra .member:hover .member-img .read-more { visibility: visible; opacity: 1; } .skuadra-img { width: 100%; object-fit: cover; object-position: center; } .modal { z-index: 10001; } .modal-content { border-radius: 1.5rem; } .modal-body img { width: 100%; object-fit: cover; object-position: center; } /* --- Default (Desktop) --- */ .section-title { position: relative; } .section-title .btn { position: absolute; top: 0; z-index: 10; } .section-title .btn:first-child { right: 3.5rem; /* PDF icon */ } .section-title .btn:last-child { right: 0.5rem; /* Diagram icon */ } @media (max-width: 767.98px) { /* Reset container layout */ .section-title { position: relative !important; text-align: center; display: flex !important; flex-direction: column; align-items: center; padding-bottom: 30px; } .section-title h2 { margin-bottom: 1rem !important; width: 100%; } .section-title .buttons-row { display: flex; justify-content: center; gap: 10px; width: 100%; flex-wrap: nowrap; } .section-title .buttons-row a.btn { position: static !important; flex: 1 1 45%; margin: 0 !important; text-align: center; } } /*-------------------------------------------------------------- # Search Result Page Section --------------------------------------------------------------*/ /* Search Section */ .search-result.section { padding: 60px 0; } .search-result-header { margin-bottom: 25px; font-size: 1.1rem; color: #555; } .search-result-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); transition: transform 0.2s, box-shadow 0.2s; } .search-result-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .search-result-card a.card-link { text-decoration: none; color: inherit; display: block; padding: 2px 0; border-radius: 6px; transition: background 0.2s, color 0.2s; } .search-result-card a.card-link:hover { background: color-mix(in srgb, var(--accent-color) 6%, #ffffff); padding: 6px; } .search-result-card h3 { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--accent-color); display: flex; align-items: center; gap: 6px; transition: color 0.2s; } .search-result-card .search-url { font-size: 0.9rem; color: #004080; margin: 5px 0 10px; display: block; word-break: break-all; transition: color 0.2s; } .search-result-card p { margin: 0; font-size: 0.95rem; color: #555; line-height: 1.5; } .search-result-card p strong { background: #ffe6cd; padding: 0 2px; border-radius: 3px; } /* PHP Email Form Messages ------------------------------*/ .php-email-form .error-message { display: none; background: #df1529; color: #ffffff; text-align: left; padding: 15px; margin-bottom: 24px; font-weight: 600; } .php-email-form .sent-message { display: none; color: #ffffff; background: #059652; text-align: center; padding: 15px; margin-bottom: 24px; font-weight: 600; } .php-email-form .loading { display: none; background: var(--surface-color); text-align: center; padding: 15px; margin-bottom: 24px; } .php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid var(--accent-color); border-top-color: var(--surface-color); animation: php-email-form-loading 1s linear infinite; } @keyframes php-email-form-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .transp-widget { font-family: Arial, sans-serif; box-sizing: border-box; margin: 20px 0; } .transp-widget table { width: 100%; border-spacing: 12px; border-collapse: separate; margin: 0 auto; table-layout: fixed; /* ensures all cells same width */ } .transp-widget td { background-color: #2e68aa; color: #fff; text-align: center; border-radius: 15px; font-size: 15px; cursor: pointer; vertical-align: middle; padding: 15px 10px; height: 110px; /* slightly taller than before */ transition: all 0.2s ease; word-wrap: break-word; } .transp-widget td:hover { background-color: #03aadf; transform: scale(1.02); } .transp-widget .titleCol { font-weight: 500; } /* ====== CONTENT DIV (paragraph) ====== */ .transp-widget .myContentsDiv { display: none; border: 1.5px solid #2e68aa; border-radius: 15px; background-color: #f7e3e3; margin: 25px auto 0 auto; padding: 20px 25px; font-size: 14px; width: 100%; max-width: 1005px; /* same as grid width */ box-sizing: border-box; } /* ====== LINKS & TEXT ====== */ .transp-widget .hyperLink { color: #045e7a; text-decoration: underline; cursor: pointer; } .transp-widget ul { list-style: none; padding-left: 0; margin: 0; } .transp-widget ul li::before { content: "•"; color: #045e7a; padding-right: 8px; } .transp-widget p { margin: 5px 0; } @media (max-width: 768px) { .transp-widget table, .transp-widget tbody, .transp-widget tr, .transp-widget td { display: block; width: 100% !important; } .transp-widget td { height: auto; margin-bottom: 10px; } .transp-widget .myContentsDiv { width: 100%; max-width: none; } }