diff --git a/TWA-App/Controllers/HomeController.cs b/TWA-App/Controllers/HomeController.cs index 94293b6..7802b39 100644 --- a/TWA-App/Controllers/HomeController.cs +++ b/TWA-App/Controllers/HomeController.cs @@ -1,4 +1,5 @@ -using System.Diagnostics; +using System.Diagnostics; +using AppLibs.Libs; using Microsoft.AspNetCore.Mvc; using TWA_App.Models; @@ -12,10 +13,10 @@ namespace TWA_App.Controllers { _logger = logger; } - - public IActionResult Index() + [PageInfor("1000", "Home")] + public async Task Index() { - return View(); + return await this.ViewAsync(); } public IActionResult Privacy() diff --git a/TWA-App/Json/navlist.json b/TWA-App/Json/navlist.json new file mode 100644 index 0000000..0657450 --- /dev/null +++ b/TWA-App/Json/navlist.json @@ -0,0 +1,187 @@ +[ + { + "id": "1000", + "name": "Home", + "icon": "home", + "group": 0, + "url": "/", + "sub-item": "" + }, + { + "id": "2000", + "name": "Company", + "icon": "", + "group": 0, + "url": "", + "sub-item": [ + { + "id": "2001", + "name": "About Us", + "url": "/Company/AboutUs" + }, + { + "id": "2002", + "name": "Our Team", + "url": "/Company/OurTeam" + }, + { + "id": "2003", + "name": "Mission & Vision", + "url": "/Company/Mission-Vision" + }, + { + "id": "2004", + "name": "Milestone", + "url": "/Company/Milestone" + }, + { + "id": "2005", + "name": "Careers", + "url": "/Company/Careers" + }, + { + "id": "2006", + "name": "Partners", + "url": "/Company/Partners" + } + ] + }, + { + "id": "3000", + "name": "Services", + "icon": "", + "group": 0, + "url": "", + "sub-item": [ + { + "name": "Air Cargo", + "group": 1 + }, + { + "id": "3001", + "name": "Air Freigth", + "url": "/GlyphFonts/Icons" + }, + { + "id": "3002", + "name": "Air Forwarder", + "url": "/GlyphFonts/Glyps" + }, + { + "id": "3003", + "name": "Cargo Tracking", + "url": "/GlyphFonts/Glyps" + }, + { + "id": "3004", + "name": "Groupage", + "url": "/GlyphFonts/Glyps" + }, + { + "id": "3004", + "name": "Special Cargo Handling", + "url": "/GlyphFonts/Glyps" + }, + { + "name": "Air Passenger", + "group": 1 + }, + { + "id": "3005", + "name": "Ticketing & Reservation", + "url": "/GlyphFonts/Glyps" + }, + { + "id": "3006", + "name": "Check-in Services", + "url": "/GlyphFonts/Glyps" + }, + { + "id": "3007", + "name": "Baggage Handling", + "url": "/GlyphFonts/Glyps" + }, + { + "id": "3008", + "name": "Customer Service & Support", + "url": "/GlyphFonts/Glyps" + }, + { + "name": "Warehouse", + "group": 1 + }, + { + "id": "3009", + "name": "Contract Logistics", + "url": "/GlyphFonts/Glyps" + }, + { + "id": "3010", + "name": "Value Added Services", + "url": "/GlyphFonts/Glyps" + }, + { + "id": "3011", + "name": "Warehouse Logistics", + "url": "/GlyphFonts/Glyps" + }, + { + "id": "3010", + "name": "Consultancy", + "url": "/GlyphFonts/Glyps" + } + + ] + }, + { + "id": "4000", + "name": "News & Events", + "icon": "", + "group": 0, + "url": "", + "sub-item": [ + { + "id": "4001", + "name": "Vectors", + "flexpage": true, + "url": "/Images/Vectors" + }, + { + "id": "4002", + "name": "Ảnh Chụp", + "flexpage": true, + "url": "/Images/Photos" + } + ] + }, + { + "id": "5000", + "name": "Resources", + "icon": "", + "group": 0, + "url": "", + "sub-item": [ + { + "id": "5001", + "name": "Vectors", + "flexpage": true, + "url": "/Images/Vectors" + }, + { + "id": "5002", + "name": "Ảnh Chụp", + "flexpage": true, + "url": "/Images/Photos" + } + ] + }, + { + "id": "6000", + "name": "Contact", + "icon": "", + "group": 0, + "url": "", + "sub-item": "" + } + +] \ No newline at end of file diff --git a/TWA-App/Program.cs b/TWA-App/Program.cs index 1510d12..cb37acf 100644 --- a/TWA-App/Program.cs +++ b/TWA-App/Program.cs @@ -1,7 +1,10 @@ +using AppLibs.Libs; + +await WSNavigation.LoadJson(); var builder = WebApplication.CreateBuilder(args); // Add services to the container. -builder.Services.AddControllersWithViews(); +builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation(); var app = builder.Build(); diff --git a/TWA-App/TWA-App.csproj b/TWA-App/TWA-App.csproj index f07cd86..1a783ba 100644 --- a/TWA-App/TWA-App.csproj +++ b/TWA-App/TWA-App.csproj @@ -7,4 +7,15 @@ TWA_App + + + + + + + + ..\..\..\..\OneDrive - ATG SERVICES AND TRADING CORPORATION\My Documents\Project\MikaltoResort\AppLibs\AppLibs\bin\Release\net8.0\AppLibs.dll + + + diff --git a/TWA-App/Views/Home/Index.cshtml b/TWA-App/Views/Home/Index.cshtml index bcfd79a..2c26fd7 100644 --- a/TWA-App/Views/Home/Index.cshtml +++ b/TWA-App/Views/Home/Index.cshtml @@ -1,8 +1,164 @@ -@{ - ViewData["Title"] = "Home Page"; -} +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
-
-

Welcome

-

Learn about building Web apps with ASP.NET Core.

+
+ +
+
+
+
+
+
+ +

+ Trusted Air Partner +

+

Safe, reliable air cargo booking and shipping, ensuring secure, timely, and cost-effective delivery

+
+
+
+
+ +

+ Professional Booking & Live Tracking +

+

Dedicated teams provide efficient cargo booking and shipping with real-time shipment tracking

+
+
+
+
+ +

Dedicated Customer Care

+

Committed to transparent, devoted service and full support for all customer needs in cargo and passenger transportation

+
+
+
+
+
+
+ + +
+
+
+
+

Welcome to Aviationaly

+

Start your aviation journey with professional instructors and top-notch facilities.

+ +
+
+
+
+ + + +
+
+
+
+

Our Programs

+
+
+
+

Private Pilot License

+

Learn the fundamentals of flying and become a licensed pilot.

+
+
+

Commercial Pilot License

+

Advance your skills and prepare for a professional aviation career.

+
+
+

Flight Instructor Course

+

Teach others how to fly and build flight hours simultaneously.

+
+
+
+
+
+ + +
+
+
+
+

What Students Say

+
+
+
+

"Great instructors and hands-on training. I got my PPL in no time!"

+ - Alex T. +
+
+

"Modern facilities and friendly staff. Highly recommended!"

+ - Maria L. +
+
+
+
+
+ + +
+
+
+
+

Contact Us

+
+ + + + +
+
+
+
+
+ +@section jsLib { + + +} \ No newline at end of file diff --git a/TWA-App/Views/Partial/Footer.cshtml b/TWA-App/Views/Partial/Footer.cshtml new file mode 100644 index 0000000..2a95254 --- /dev/null +++ b/TWA-App/Views/Partial/Footer.cshtml @@ -0,0 +1,3 @@ +
+

© 2025 Aviationaly. All rights reserved.

+
\ No newline at end of file diff --git a/TWA-App/Views/Partial/Header.cshtml b/TWA-App/Views/Partial/Header.cshtml new file mode 100644 index 0000000..4b3f3e0 --- /dev/null +++ b/TWA-App/Views/Partial/Header.cshtml @@ -0,0 +1,31 @@ +
+
+
+ +
+
+
+ English +
+
Vietnam
+
Cambodia
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+ + +
+
\ No newline at end of file diff --git a/TWA-App/Views/Partial/MenuAP.cshtml b/TWA-App/Views/Partial/MenuAP.cshtml new file mode 100644 index 0000000..7b5fc57 --- /dev/null +++ b/TWA-App/Views/Partial/MenuAP.cshtml @@ -0,0 +1,72 @@ +@using AppLibs.Libs +@{ + List t = await WSNavigation.GetListMenu(); + +} + +@foreach (var i in t) +{ + if (i.SubItem == null) + { +
+ @i.Name +
+ } + else + { +
+ @i.Name + @switch (i.ID) + { + case "3000": +
+
+
+ @{ + string s = ""; + string groupHtml = ""; + string list = ""; + foreach (var j in i.SubItem) + { + + if (j.IsGroup) + { + + if (groupHtml.Length > 0) + { + s += String.Format(groupHtml, list); + list = ""; + } + groupHtml = $"

{j.Name}

{{0}}
"; + }else{ + list += $"
{j.Name}
"; + } + + } + if (groupHtml.Length > 0) + { + s += String.Format(groupHtml, list); + } + + } + @Html.Raw(s) +
+ +
+
+
+
+ break; + default: +
+ @foreach (var j in i.SubItem) + { +
@j.Name
+ } +
+ break; + } + +
+ } +} \ No newline at end of file diff --git a/TWA-App/Views/Shared/Error.cshtml b/TWA-App/Views/Shared/Error.cshtml deleted file mode 100644 index a1e0478..0000000 --- a/TWA-App/Views/Shared/Error.cshtml +++ /dev/null @@ -1,25 +0,0 @@ -@model ErrorViewModel -@{ - ViewData["Title"] = "Error"; -} - -

Error.

-

An error occurred while processing your request.

- -@if (Model.ShowRequestId) -{ -

- Request ID: @Model.RequestId -

-} - -

Development Mode

-

- Swapping to Development environment will display more detailed information about the error that occurred. -

-

- The Development environment shouldn't be enabled for deployed applications. - It can result in displaying sensitive information from exceptions to end users. - For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development - and restarting the app. -

diff --git a/TWA-App/Views/Shared/_Layout.cshtml b/TWA-App/Views/Shared/_Layout.cshtml index 02a370a..5fbcaaf 100644 --- a/TWA-App/Views/Shared/_Layout.cshtml +++ b/TWA-App/Views/Shared/_Layout.cshtml @@ -1,130 +1,66 @@ - +@{ + IgnoreSection("jsLib"); + IgnoreSection("jsPage"); + IgnoreBody(); +} + - - - Aviationaly - Aviation & Flight School - + + + + + + + + + + + - - -
-
-
-
- Logo -
- -
-
-
+ +
+
+
+ +
+
- -
-
-
-
-

Welcome to Aviationaly

-

Start your aviation journey with professional instructors and top-notch facilities.

- -
+
+
+
+ +
+ + +
+
+
+ diff --git a/TWA-App/Views/Shared/_LayoutAsync.cshtml b/TWA-App/Views/Shared/_LayoutAsync.cshtml new file mode 100644 index 0000000..28b4915 --- /dev/null +++ b/TWA-App/Views/Shared/_LayoutAsync.cshtml @@ -0,0 +1,12 @@ + +
+
+ +@section jsLib { + + +} diff --git a/TWA-App/Views/Shared/_PartialScript.cshtml b/TWA-App/Views/Shared/_PartialScript.cshtml new file mode 100644 index 0000000..036e436 --- /dev/null +++ b/TWA-App/Views/Shared/_PartialScript.cshtml @@ -0,0 +1,5 @@ +@RenderSection("jsLib", required: false) +@RenderSection("jsPage", required: false) +@{ + IgnoreBody(); +} diff --git a/TWA-App/Views/Shared/_ValidationScriptsPartial.cshtml b/TWA-App/Views/Shared/_ValidationScriptsPartial.cshtml deleted file mode 100644 index 5d1f685..0000000 --- a/TWA-App/Views/Shared/_ValidationScriptsPartial.cshtml +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/TWA-App/Views/_ViewImports.cshtml b/TWA-App/Views/_ViewImports.cshtml index 5b83090..8cd1592 100644 --- a/TWA-App/Views/_ViewImports.cshtml +++ b/TWA-App/Views/_ViewImports.cshtml @@ -1,3 +1,4 @@ @using TWA_App @using TWA_App.Models +@using AppLibs.Libs; @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers diff --git a/TWA-App/Views/_ViewStart.cshtml b/TWA-App/Views/_ViewStart.cshtml index a5f1004..167fa9e 100644 --- a/TWA-App/Views/_ViewStart.cshtml +++ b/TWA-App/Views/_ViewStart.cshtml @@ -1,3 +1,11 @@ @{ - Layout = "_Layout"; + switch (ViewData["Layout"]) + { + case "SectionScript": + Layout = "_PartialScript"; + break; + default: + Layout = "_Layout"; + break; + } } diff --git a/TWA-App/wwwroot/css/atg-font/atg-admin-font.css b/TWA-App/wwwroot/css/atg-font/atg-admin-font.css index f221859..da060f5 100644 --- a/TWA-App/wwwroot/css/atg-font/atg-admin-font.css +++ b/TWA-App/wwwroot/css/atg-font/atg-admin-font.css @@ -7,6 +7,9 @@ } .atg { + line-height: 1; + display: flex; + align-items:center; font-style: normal; font-family: atg-admin-font; font-weight: 400; @@ -15,7 +18,12 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - +.a-s6x{ + font-size: .55em +} +.a-s8x{ + font-size: .8em +} .a-1x { font-size: 1em } @@ -297,4 +305,18 @@ } .atg-filters-light:before { content: "\a03E" +} + +.atg-world:before { + content: "\a028" +} +.atg-trusted:before { + content: '\a03f' +} + +.atg-air-cargo:before { + content: '\a040' +} +.atg-support:before { + content: '\a041' } \ No newline at end of file diff --git a/TWA-App/wwwroot/css/atg-font/atg-font.css b/TWA-App/wwwroot/css/atg-font/atg-font.css index f06c25f..78e6347 100644 --- a/TWA-App/wwwroot/css/atg-font/atg-font.css +++ b/TWA-App/wwwroot/css/atg-font/atg-font.css @@ -193,3 +193,4 @@ .a-bag:before { content: '\f0028' } + diff --git a/TWA-App/wwwroot/css/atg-lib/atg-core.css b/TWA-App/wwwroot/css/atg-lib/atg-core.css index 37759d9..4d07c00 100644 --- a/TWA-App/wwwroot/css/atg-lib/atg-core.css +++ b/TWA-App/wwwroot/css/atg-lib/atg-core.css @@ -1,7 +1,4 @@ -:root { - --vh: 100%; - --margin-base: 25px; -} + [data-scrollbar], .mini-scrollbar { overflow: hidden; @@ -32,7 +29,7 @@ a { } button, input, textarea { - font-family: Quicksand,'Segoe UI', Arial !important; + font-family: "Mulish", sans-serif !important; cursor: pointer } @@ -44,13 +41,10 @@ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; - font-family: Quicksand,'Segoe UI', Arial; + font-family: "Mulish", sans-serif !important; color: #333; } - html:not(:has(.main-scrollbar.iOS)) { - -ms-overflow-style: none; - scrollbar-width: none; - } + body { margin: 0; font-size: 1rem; @@ -2367,6 +2361,7 @@ h1, h2, h3, h4, h5, h6, p { } } + html { font-size: 14px } @@ -2387,18 +2382,23 @@ html { font-size: 18px; } } - +h1, h2, h3, h4, h5, h6 { + font-family: "Playfair Display", serif; + font-weight: 800 +} h1 { - font-size: 3.8rem + font-size: 3.8rem; + font-weight: 700 } h2 { - font-size: 2.8rem + font-size: 2.8rem; + font-weight: 600 } h3 { - font-size: 1.4rem + font-size: 1.2rem; } .light .border-b { @@ -2417,2827 +2417,8 @@ h3 { } :root { - --blue: #20304f; - --indigo: #6610f2; - --purple: #6f42c1; - --pink: #d63384; - --red: #dc3545; - --orange: #fd7e14; - --yellow: #ffc107; - --green: #80ba26; - --teal: #20c997; - --cyan: #0dcaf0; - --white: #fff; - --dark2-rgb: 42, 64, 104; - --dark: #162440; - --dark-rgb: 22, 36, 64; - --dark1: #20304F; - --dark1-rgb: 32, 48, 79; - --gray: #6c757d; - --gray-dark: #343a40; - --gray-100: #f8f9fa; - --gray-200: #e9ecef; - --gray-300: #dee2e6; - --gray-400: #ced4da; - --gray-500: #adb5bd; - --gray-600: #6c757d; - --gray-700: #495057; - --gray-800: #343a40; - --gray-900: #212529; - --primary: #f3525a; - --secondary: #20304f; - --success: #198754; - --info: #0dcaf0; - --warning: #ffc107; - --danger: #dc3545; - --light: #f8f9fa; - --btn-font-weight: 500; - --margin-gap: 3px; - --border-radius: 5px; - --light-bg: #F9F9FA; - --margin-row: calc(var(--margin-base) - var(--margin-gap)); - --footer-color: #FFFFFFCC; - --footer-border-color: #ffffff99; - --input-padding: 7px; -} - -.m-gap { - margin: 0 var(--margin-gap); -} - -.p-gap { - padding: 0 var(--margin-gap); -} - -.r-d { - margin-right: var(--margin-row); - margin-left: var(--margin-row); -} - -.primary-color { - color: var(--primary) -} - -.bg-dark { - background-color: var(--dark) -} - -.bg-dark1 { - background-color: var(--dark1) -} - -.bg-dark2 { - background-color: rgb(var(--dark2-rgb)) -} - -.bg-white { - background-color: white -} - -.bg-primary { - background-color: var(--primary) -} - -.bg-light { - background-color: var(--light-bg) -} - -.text-white { - color: #fff; -} - -[data-scrollbar], [scrollbar], scrollbar { - display: block; - position: relative -} - - [data-scrollbar] .scrollbar-track { - z-index: 2000 !important - } - - [data-scrollbar] .scroll-content, [scrollbar] .scroll-content, scrollbar .scroll-content { - -webkit-transform: translateZ(0); - transform: translateZ(0) - } - - [data-scrollbar].sticky .scrollbar-track, [scrollbar].sticky .scrollbar-track, scrollbar.sticky .scrollbar-track { - background-color: transparent - } - - [data-scrollbar] .scrollbar-track, [scrollbar] .scrollbar-track, scrollbar .scrollbar-track { - position: absolute; - opacity: 0; - z-index: 1; - transition: opacity .5s ease-out,background .5s ease-out; - background: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none - } - - [data-scrollbar] .scrollbar-track.show, [data-scrollbar] .scrollbar-track:hover, [scrollbar] .scrollbar-track.show, [scrollbar] .scrollbar-track:hover, scrollbar .scrollbar-track.show, scrollbar .scrollbar-track:hover { - opacity: 1 - } - - [data-scrollbar] .scrollbar-track:hover, [scrollbar] .scrollbar-track:hover, scrollbar .scrollbar-track:hover { - background: hsla(0,0%,87%,.75) - } - - [data-scrollbar] .scrollbar-track-x, [scrollbar] .scrollbar-track-x, scrollbar .scrollbar-track-x { - bottom: 0; - left: 4px; - width: calc(100%- 8px); - height: 4px - } - - [data-scrollbar] .scrollbar-track-y, [scrollbar] .scrollbar-track-y, scrollbar .scrollbar-track-y { - top: 4px; - right: 0; - width: 4px; - height: calc(100% - 8px); - } - - [data-scrollbar] .scrollbar-thumb, [scrollbar] .scrollbar-thumb, scrollbar .scrollbar-thumb { - position: absolute; - top: 0; - left: 0; - width: 2px; - height: 2px; - background: rgba(0,0,0,.5); - border-radius: 4px - } - - [data-scrollbar] .overscroll-glow, [scrollbar] .overscroll-glow, scrollbar .overscroll-glow { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100% - } - -.header { - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 101 -} - -.f-header { - box-shadow: 0 2px 3px rgba(96, 96, 96, 0.1); - z-index: 1999; - width: 100%; - background-color: #fff; - position: absolute; - top: -100px; - transition: top .3s ease-in -} - - .f-header .nav-link { - padding-top: 1.8rem; - padding-bottom: 1.8rem; - } - - .f-header.show { - top: 0 - } - -.row1 .nav-item { - font-weight: 500; -} - -.row1 .atg { - font-size: 1rem -} - -.row2 { - margin-top: 10px; -} - -.c-logo img { - height: 40px -} - -.logo-light { - display: none -} - -.logo-dark { - display: block -} - -.hp .header { - background-color: transparent; -} - -.hp .logo-light { - display: none -} - -.hp .logo-dark { - display: block -} - -.navbar-nav .nav-item { - display: flex; - flex-direction: column -} - - .navbar-nav.nav-item .dropdown::after, .navbar-nav .nav-link::after, .navbar-nav .nav-item .dropdown::before, .navbar-nav .nav-link::before { - content: ''; - display: block; - position: absolute; - height: 0; - width: 0; - left: 50%; - right: 50%; - bottom: 0; - background: var(--red) - } - -.navbar-nav .dropdown::after, .navbar-nav .nav-link::after, .navbar-nav .nav-link.active::after { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - transition: left .35s ease-out, width .35s ease-out -} - -.navbar-nav .dropdown::before, .navbar-nav .nav-link::before, .navbar-nav .nav-link.active::before { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - transition: right .35s ease-out, width .35s ease-out -} - -.navbar-nav .nav-item.active .dropdown::after, .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { - left: 5%; - right: 45%; - width: 45%; - height: 3px -} - -.navbar-nav .nav-item.active .dropdown::before, .navbar-nav .nav-link:hover::before, .navbar-nav .nav-link.active::before { - left: 45%; - right: 5%; - width: 50%; - height: 3px -} - -.nav-link { - color: var(--dark); - text-transform: uppercase; - font-size: 1.1rem; - font-weight: 600; - padding: 1.5rem 1rem; -} - -.navbar-nav .sub-item { - visibility: hidden; - height: 0; -} - -.ico-menu { - cursor: pointer; - margin: 10px 0; - background-color: var(--secondary); - border-radius: var(--border-radius); -} - - .ico-menu div { - text-align: left; - display: block; - width: 35px; - height: 2px; - background: white; - margin-bottom: 8px; - } - - .ico-menu div span { - position: absolute; - transition: width .3s ease-in; - left: 0; - top: 0; - height: 2px; - background: var(--primary) - } - - .ico-menu div:first-child { - margin-top: 8px; - } - -.h-menu .item { - color: #fff; - cursor: pointer; - padding: 4px 14px -} - -.lets-work { - top: 50%; - transform: translateY(-50%) -} - - .lets-work h1 { - font-size: 2.8rem; - color: white - } - -.ss-footer1 { - background-image: url(/images/banner/f_img1.jpg); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - height: 380px; -} - - .ss-footer1 .filter { - background-color: rgba(var(--dark-rgb), .4) - } - -.ss-footer2 img { - width: 210px -} - -.ss-footer2 { - color: #FFFFFFCC !important; -} - -.ss-footer3, .ss-footer2 { - color: white; - font-size: .9rem -} - -.m-footer a { - margin: 0 10px; - color: white; - transition: color ease-in .3s -} - - .m-footer a:hove r { - color: var(--primary) - } - -.m-footer .item { - margin: 2px 0; - display: flex; - color: var(--footer-color); - align-items: center; -} - -.m-footer.social i { - font-size: 1.5rem; - color: var(--footer-color) -} - -.m-footer .item:hover { - color: #FFF !important -} - - .m-footer .item:hover i { - color: var(--primary) - } - -.m-footer i { - transition: color ease-in .3s; - margin-right: 10px; - color: var(--green); -} - -footer input, footer button { - vertical-align: middle; - color: var(--footer-color); - border: 2px solid var(--footer-border-color); - border-radius: 0; - background-color: transparent; - line-height: 23px; - border-right-width: 0; -} - -.ss-footer2 .btn { - padding: var(--input-padding) calc(var(--input-padding) * 4); - background-color: var(--footer-border-color); - color: var(--dark1); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left: none; - line-height: 30px; -}:root { --vh: 100%; --margin-base: 25px; -} - -[data-scrollbar], .mini-scrollbar { - overflow: hidden; - height: calc(var(--vh, 1vh) * 100); - width: 100% -} - -.main-scrollbar.iOS { - overflow: visible !important; - height: auto !important -} - -.no-wrap{ - flex-wrap: nowrap !important -} - -.noselect { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none -} - -a { - text-decoration: none -} - -button, input, textarea { - font-family: Quicksand,'Segoe UI', Arial !important; - cursor: pointer -} - -.bg-white { - background: white -} - -html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - -webkit-tap-highlight-color: transparent; - font-family: Quicksand,'Segoe UI', Arial; - color: #333; -} - html:not(:has(.main-scrollbar.iOS)) { - -ms-overflow-style: none; - scrollbar-width: none; - } -body { - margin: 0; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - text-align: left; - background-color: #fff; -} - - body:not(:has(.main-scrollbar.iOS)) { - -ms-overflow-style: none; - scrollbar-width: none; - overflow: hidden; - } - - html:not(:has(.main-scrollbar.iOS))::-webkit-scrollbar, body:not(:has(.main-scrollbar.iOS))::-webkit-scrollbar { - display: none; - } - -button, div, i, img, header, footer, main, content, section { - display: block; - position: relative; -} - -input, textarea, button { - border: none; - outline: none; - transition: all .3s ease-in-out -} - -*, ::after, ::before { - box-sizing: border-box; -} - -ol, ul { - margin: 0; - padding: 0; - list-style: none; -} - -h1, h2, h3, h4, h5, h6, p { - display: block; - position: relative; - margin: 0; -} - -.text-justify { - text-align: justify -} - -.text-center { - text-align: center -} - -.h-100vh { - min-height: 100vh; -} - -.h-100 { - height: 100%; -} - -.w-100 { - width: 100%; -} - -.cfull, .con { - width: 100% !important; -} - - .cfull .r, .con .r { - margin-left: var(--margin-base); - margin-right: var(--margin-base); - } - -@media (min-width:576px) { - .cfull .r, .con .r { - max-width: 100%; - } -} - -@media (min-width:768px) { - .con .r { - max-width: 720px; - margin-left: auto; - margin-right:auto; - } -} - -@media (min-width:992px) { - .con .r { - max-width: 860px; - } -} - -@media (min-width:1200px) { - .con .r { - max-width: 1110px; - } - -} - -@media (min-width:1400px) { - .con .r { - max-width: 1360px; - } -} - -@media (min-width:1900px) { - .con .r { - max-width: 1660px; - } -} - -.r, .r-s, .r-n-g, .r-d { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.r { - margin-right: var(--margin-base); - margin-left: var(--margin-base); -} - -.r-s { - margin: 0 45px; -} - -.r-n-g { - margin-right: 0; - margin-left: 0; -} - -.r > .c, .r > [class^=c-] { - padding-right: 0; - padding-left: 0; -} - -.r-n-g > [class^=c-], .r > [class^=c-] { - position: relative; - width: 100%; - min-height: 1px; -} - -.c-a { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; -} - -.c-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; -} - -.c-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; -} - -.c-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; -} - -.c-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; -} - -.c-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; -} - -.c-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; -} - -.c-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; -} - -.c-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; -} - -.c-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; -} - -.c-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; -} - -.c-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; -} - -.c-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; -} - -.d-n { - display: none !important; -} - -.d-b { - display: block !important; -} - -.d-f { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; -} - -.f-r { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; -} - -.f-c { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; -} - -.f-r-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; -} - -.f-c-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; -} - -.f-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; -} - -.f-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; -} - -.f-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; -} - -.j-c-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; -} - -.j-c-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; -} - -.j-c-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; -} - -.j-c-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; -} - -.j-c-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; -} - -.a-i-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; -} - -.a-i-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; -} - -.a-i-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; -} - -.a-i-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; -} - -.a-i-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; -} - -.a-c-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; -} - -.a-c-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; -} - -.a-c-center { - -ms-flex-line-pack: center !important; - align-content: center !important; -} - -.a-c-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; -} - -.a-c-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; -} - -.a-c-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; -} - -.a-s-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; -} - -.a-s-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; -} - -.a-s-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; -} - -.a-s-center { - -ms-flex-item-align: center !important; - align-self: center !important; -} - -.a-s-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; -} - -.a-s-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; -} - -.m-0 { - margin: 0 !important; -} - -.mt-0 { - margin-top: 0 !important; -} - -.mr-0 { - margin-right: 0 !important; -} - -.mb-0 { - margin-bottom: 0 !important; -} - -.ml-0 { - margin-left: 0 !important; -} - -.m-1 { - margin: .25rem !important; -} - -.mt-1 { - margin-top: .25rem !important; -} - -.mr-1 { - margin-right: .25rem !important; -} - -.mb-1 { - margin-bottom: .25rem !important; -} - -.ml-1 { - margin-left: .25rem !important; -} - -.m-2 { - margin: .5rem !important; -} - -.mt-2 { - margin-top: .5rem !important; -} - -.mr-2 { - margin-right: .5rem !important; -} - -.mb-2 { - margin-bottom: .5rem !important; -} - -.ml-2 { - margin-left: .5rem !important; -} - -.m-3 { - margin: 1rem !important; -} - -.mt-3 { - margin-top: 1rem !important; -} - -.mr-3 { - margin-right: 1rem !important; -} - -.mb-3 { - margin-bottom: 1rem !important; -} - -.ml-3 { - margin-left: 1rem !important; -} - -.m-4 { - margin: 1.5rem !important; -} - -.mt-4 { - margin-top: 1.5rem !important; -} - -.mr-4 { - margin-right: 1.5rem !important; -} - -.mb-4 { - margin-bottom: 1.5rem !important; -} - -.ml-4 { - margin-left: 1.5rem !important; -} - -.m-5 { - margin: 3rem !important; -} - -.mt-5 { - margin-top: 3rem !important; -} - -.mr-5 { - margin-right: 3rem !important; -} - -.mb-5 { - margin-bottom: 3rem !important; -} - -.ml-5 { - margin-left: 3rem !important; -} - -.p-0 { - padding: 0 !important; -} - -.pt-0 { - padding-top: 0 !important; -} - -.pr-0 { - padding-right: 0 !important; -} - -.pb-0 { - padding-bottom: 0 !important; -} - -.pl-0 { - padding-left: 0 !important; -} - -.p-1 { - padding: .25rem !important; -} - -.pt-1 { - padding-top: .25rem !important; -} - -.pr-1 { - padding-right: .25rem !important; -} - -.pb-1 { - padding-bottom: .25rem !important; -} - -.pl-1 { - padding-left: .25rem !important; -} - -.p-2 { - padding: .5rem !important; -} - -.pt-2 { - padding-top: .5rem !important; -} - -.pr-2 { - padding-right: .5rem !important; -} - -.pb-2 { - padding-bottom: .5rem !important; -} - -.pl-2 { - padding-left: .5rem !important; -} - -.p-3 { - padding: 1rem !important; -} - -.pt-3 { - padding-top: 1rem !important; -} - -.pr-3 { - padding-right: 1rem !important; -} - -.pb-3 { - padding-bottom: 1rem !important; -} - -.pl-3 { - padding-left: 1rem !important; -} - -.p-4 { - padding: 1.5rem !important; -} - -.pt-4 { - padding-top: 1.5rem !important; -} - -.pr-4 { - padding-right: 1.5rem !important; -} - -.pb-4 { - padding-bottom: 1.5rem !important; -} - -.pl-4 { - padding-left: 1.5rem !important; -} - -.p-5 { - padding: 3rem !important; -} - -.pt-5 { - padding-top: 3rem !important; -} - -.pr-5 { - padding-right: 3rem !important; -} - -.pb-5 { - padding-bottom: 3rem !important; -} - -.pl-5 { - padding-left: 3rem !important; -} - -.m-auto { - margin: auto !important; -} - -.mt-auto { - margin-top: auto !important; -} - -.mr-auto { - margin-right: auto !important; -} - -.mb-auto { - margin-bottom: auto !important; -} - -.ml-auto { - margin-left: auto !important; -} - -.gap-0 { - gap: 0 !important; -} - -.gap-1 { - gap: 0.25rem !important; -} - -.gap-2 { - gap: 0.5rem !important; -} - -.gap-3 { - gap: 1rem !important; -} - -.gap-4 { - gap: 1.5rem !important; -} - -.gap-5 { - gap: 3rem !important; -} - -@media (min-width:576px) { - .c-s-a { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; - } - - .c-s-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - - .c-s-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - - .c-s-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - - .c-s-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - - .c-s-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - - .c-s-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - - .c-s-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - - .c-s-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - - .c-s-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; - } - - .c-s-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - - .c-s-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - - .c-s-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - - .d-s-n { - display: none !important; - } - - .d-s-b { - display: block !important; - } - - .d-s-f { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - - .f-s-r { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } - - .f-s-c { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; - } - - .f-s-r-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - - .f-s-c-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - - .f-s-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; - } - - .f-s-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; - } - - .f-s-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; - } - - .j-c-s-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - - .j-c-s-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - - .j-c-s-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; - } - - .j-c-s-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - - .j-c-s-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - - .a-i-s-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; - } - - .a-i-s-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; - } - - .a-i-s-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; - } - - .a-i-s-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - - .a-i-s-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; - } - - .a-c-s-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; - } - - .a-c-s-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; - } - - .a-c-s-center { - -ms-flex-line-pack: center !important; - align-content: center !important; - } - - .a-c-s-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; - } - - .a-c-s-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; - } - - .a-c-s-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; - } - - .a-s-m-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; - } - - .a-s-m-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; - } - - .a-s-m-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; - } - - .a-s-m-center { - -ms-flex-item-align: center !important; - align-self: center !important; - } - - .a-s-m-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; - } - - .a-s-m-stretch { - -ms-flex-item-align: stretch !important; - align-items: stretch !important; - } - - .gap-s-0 { - gap: 0 !important; - } - - .gap-s-1 { - gap: 0.25rem !important; - } - - .gap-s-2 { - gap: 0.5rem !important; - } - - .gap-s-3 { - gap: 1rem !important; - } - - .gap-s-4 { - gap: 1.5rem !important; - } - - .gap-s-5 { - gap: 3rem !important; - } -} - -@media (min-width:768px) { - .c-m-a { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; - } - - .c-m-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - - .c-m-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - - .c-m-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - - .c-m-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - - .c-m-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - - .c-m-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - - .c-m-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - - .c-m-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - - .c-m-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; - } - - .c-m-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - - .c-m-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - - .c-m-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - - .d-m-n { - display: none !important; - } - - .d-m-b { - display: block !important; - } - - .d-m-f { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - - .f-m-r { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } - - .f-m-c { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; - } - - .f-m-r-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - - .f-m-c-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - - .f-m-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; - } - - .f-m-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; - } - - .f-m-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; - } - - .j-c-m-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - - .j-c-m-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - - .j-c-m-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; - } - - .j-c-m-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - - .j-c-m-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - - .a-i-m-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; - } - - .a-i-m-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; - } - - .a-i-m-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; - } - - .a-i-m-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - - .a-i-m-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; - } - - .a-c-m-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; - } - - .a-c-m-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; - } - - .a-c-m-center { - -ms-flex-line-pack: center !important; - align-content: center !important; - } - - .a-c-m-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; - } - - .a-c-m-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; - } - - .a-c-m-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; - } - - .a-s-m-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; - } - - .a-s-m-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; - } - - .a-s-m-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; - } - - .a-s-m-center { - -ms-flex-item-align: center !important; - align-self: center !important; - } - - .a-s-m-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; - } - - .a-s-m-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; - } - - .mr-m-0 { - margin-right: 0 !important - } - - .ml-m-0 { - margin-left: 0 !important - } - - .mt-m-0 { - margin-top: 0 !important - } - - .pl-m-5 { - padding-left: 3rem !important; - } - - .pr-m-5 { - padding-right: 3rem !important; - } - - .gap-m-0 { - gap: 0 !important; - } - - .gap-m-1 { - gap: 0.25rem !important; - } - - .gap-m-2 { - gap: 0.5rem !important; - } - - .gap-m-3 { - gap: 1rem !important; - } - - .gap-m-4 { - gap: 1.5rem !important; - } - - .gap-m-5 { - gap: 3rem !important; - } -} - -@media (min-width:992px) { - .c-l-a { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; - } - - .c-l-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - - .c-l-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - - .c-l-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - - .c-l-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - - .c-l-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - - .c-l-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - - .c-l-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - - .c-l-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - - .c-l-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; - } - - .c-l-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - - .c-l-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - - .c-l-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - - .d-l-n { - display: none !important; - } - - .d-l-b { - display: block !important; - } - - .d-l-f { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - - .f-l-r { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } - - .f-l-c { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; - } - - .f-l-r-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - - .f-l-c-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - - .f-l-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; - } - - .f-l-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; - } - - .f-l-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; - } - - .j-c-l-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - - .j-c-l-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - - .j-c-l-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; - } - - .j-c-l-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - - .j-c-l-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - - .a-i-l-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; - } - - .a-i-l-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; - } - - .a-i-l-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; - } - - .a-i-l-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - - .a-i-l-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; - } - - .a-c-l-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; - } - - .a-c-l-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; - } - - .a-c-l-center { - -ms-flex-line-pack: center !important; - align-content: center !important; - } - - .a-c-l-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; - } - - .a-c-l-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; - } - - .a-c-l-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; - } - - .a-s-l-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; - } - - .a-s-l-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; - } - - .a-s-l-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; - } - - .a-s-l-center { - -ms-flex-item-align: center !important; - align-self: center !important; - } - - .a-s-l-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; - } - - .a-s-l-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; - } - - .mt-l-0{ - margin-top: 0 !important - } - - .ml-l-2 { - margin-left: .5rem !important - } - - .ml-l-3 { - margin-left: 1rem !important - } - - .mr-l-3{ - margin-right: 1rem !important - } - - .mb-l-0{ - margin-bottom: 0!important; - } - - .pr-l-5 { - padding-right: 3rem !important; - } - - .pl-l-5 { - padding-left: 3rem !important; - } - - .gap-l-0 { - gap: 0 !important; - } - - .gap-l-1 { - gap: 0.25rem !important; - } - - .gap-l-2 { - gap: 0.5rem !important; - } - - .gap-l-3 { - gap: 1rem !important; - } - - .gap-l-4 { - gap: 1.5rem !important; - } - - .gap-l-5 { - gap: 3rem !important; - } -} - -@media (min-width:1200px) { - .c-x-a { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; - } - - .c-x-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - - .c-x-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - - .c-x-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - - .c-x-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - - .c-x-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - - .c-x-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - - .c-x-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - - .c-x-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - - .c-x-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; - } - - .c-x-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - - .c-x-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - - .c-x-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - - .d-x-n { - display: none !important; - } - - .d-x-b { - display: block !important; - } - - .d-x-f { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - - .f-x-r { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } - - .f-x-c { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; - } - - .f-x-r-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - - .f-x-c-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - - .f-x-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; - } - - .f-x-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; - } - - .f-x-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; - } - - .j-c-x-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - - .j-c-x-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - - .j-c-x-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; - } - - .j-c-x-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - - .j-c-x-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - - .a-i-x-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; - } - - .a-i-x-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; - } - - .a-i-x-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; - } - - .a-i-x-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - - .a-i-x-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; - } - - .a-c-x-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; - } - - .a-c-x-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; - } - - .a-c-x-center { - -ms-flex-line-pack: center !important; - align-content: center !important; - } - - .a-c-x-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; - } - - .a-c-x-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; - } - - .a-c-x-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; - } - - .a-s-x-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; - } - - .a-s-x-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; - } - - .a-s-x-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; - } - - .a-s-x-center { - -ms-flex-item-align: center !important; - align-self: center !important; - } - - .a-s-x-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; - } - - .a-s-x-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; - } - - .mt-x-0{ - margin-top: 0 !important - } - - .ml-x-auto { - margin-left: auto !important; - } - - .ml-x-5{ - margin-left: 3rem !important - } - - .mr-x-5{ - margin-right: 3rem !important - } - - .mb-x-0 { - margin-bottom: 0 !important; - } -} - -@media (min-width:1400px) { - .c-xm-a { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; - } - - .c-xm-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - - .c-xm-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - - .c-xm-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - - .c-xm-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - - .c-xm-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - - .c-xm-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - - .c-xm-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - - .c-xm-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - - .c-xm-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; - } - - .c-xm-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - - .c-xm-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - - .c-xm-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - - .d-xm-n { - display: none !important; - } - - .d-xm-b { - display: block !important; - } - - .d-xm-f { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - - .f-xm-r { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } - - .f-xm-c { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; - } - - .f-xm-r-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - - .f-xm-c-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - - .f-xm-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; - } - - .f-xm-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; - } - - .f-xm-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; - } - - .j-c-xm-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - - .j-c-xm-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - - .j-c-xm-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; - } - - .j-c-xm-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - - .j-c-xm-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - - .a-i-xm-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; - } - - .a-i-xm-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; - } - - .a-i-xm-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; - } - - .a-i-xm-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - - .a-i-xm-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; - } - - .a-c-xm-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; - } - - .a-c-xm-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; - } - - .a-c-xm-center { - -ms-flex-line-pack: center !important; - align-content: center !important; - } - - .a-c-xm-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; - } - - .a-c-xm-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; - } - - .a-c-xm-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; - } - - .a-s-xm-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; - } - - .a-s-xm-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; - } - - .a-s-xm-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; - } - - .a-s-xm-center { - -ms-flex-item-align: center !important; - align-self: center !important; - } - - .a-s-xm-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; - } - - .a-s-xm-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; - } - - .ml-xm-auto { - margin-left: auto !important; - } - - .ml-xm-5 { - margin-left: 3rem !important; - } - - .mb-xm-0 { - margin-bottom: 0 !important; - } -} - -@media (min-width:1900px) { - .c-sx-a { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - max-width: none; - } - - .c-sx-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; - } - - .c-sx-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - - .c-sx-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - - .c-sx-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - - .c-sx-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - - .c-sx-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - - .c-sx-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; - } - - .c-sx-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; - } - - .c-sx-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; - } - - .c-sx-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; - } - - .c-sx-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; - } - - .c-sx-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - - .d-sx-n { - display: none !important; - } - - .d-sx-b { - display: block !important; - } - - .d-sx-f { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - - .f-sx-r { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } -} - -html { - font-size: 14px -} - -@media (min-width: 768px) { - html { - font-size: 15px; - } -} - -@media (min-width: 1200px) { - html { - font-size: 16px; - } -} -@media (min-width: 1400px) { - html { - font-size: 18px; - } -} - - -h1 { - font-size: 3.8rem -} - -h2 { - font-size: 2.8rem -} - -h3 { - font-size: 1.4rem -} - -.light .border-b { - border-bottom: 1px solid #41475435; -} - -.dark .border-b { - border-bottom: 1px solid #dee2e6; -} - -.filter { - position: absolute; - width: 100%; - height: 100%; - z-index: 1 -} - -:root { --blue: #20304f; --indigo: #6610f2; --purple: #6f42c1; @@ -5424,98 +2605,6 @@ h3 { top: 0 } -.row1 .nav-item { - font-weight: 500; -} - -.row1 .atg { - font-size: 1rem -} - -.row2 { - margin-top: 10px; -} - -.c-logo img { - height: 40px -} - -.logo-light { - display: none -} - -.logo-dark { - display: block -} - -.hp .header { - background-color: transparent; -} - -.hp .logo-light { - display: none -} - -.hp .logo-dark { - display: block -} - -.navbar-nav .nav-item { - display: flex; - flex-direction: column -} - - .navbar-nav.nav-item .dropdown::after, .navbar-nav .nav-link::after, .navbar-nav .nav-item .dropdown::before, .navbar-nav .nav-link::before { - content: ''; - display: block; - position: absolute; - height: 0; - width: 0; - left: 50%; - right: 50%; - bottom: 0; - background: var(--red) - } - -.navbar-nav .dropdown::after, .navbar-nav .nav-link::after, .navbar-nav .nav-link.active::after { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - transition: left .35s ease-out, width .35s ease-out -} - -.navbar-nav .dropdown::before, .navbar-nav .nav-link::before, .navbar-nav .nav-link.active::before { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - transition: right .35s ease-out, width .35s ease-out -} - -.navbar-nav .nav-item.active .dropdown::after, .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { - left: 5%; - right: 45%; - width: 45%; - height: 3px -} - -.navbar-nav .nav-item.active .dropdown::before, .navbar-nav .nav-link:hover::before, .navbar-nav .nav-link.active::before { - left: 45%; - right: 5%; - width: 50%; - height: 3px -} - -.nav-link { - color: var(--dark); - text-transform: uppercase; - font-size: 1.1rem; - font-weight: 600; - padding: 1.5rem 1rem; -} - -.navbar-nav .sub-item { - visibility: hidden; - height: 0; -} - .ico-menu { cursor: pointer; margin: 10px 0; @@ -5543,101 +2632,4 @@ h3 { .ico-menu div:first-child { margin-top: 8px; - } - -.h-menu .item { - color: #fff; - cursor: pointer; - padding: 4px 14px -} - -.lets-work { - top: 50%; - transform: translateY(-50%) -} - - .lets-work h1 { - font-size: 2.8rem; - color: white - } - -.ss-footer1 { - background-image: url(/images/banner/f_img1.jpg); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - height: 380px; -} - - .ss-footer1 .filter { - background-color: rgba(var(--dark-rgb), .4) - } - -.ss-footer2 img { - width: 210px -} - -.ss-footer2 { - color: #FFFFFFCC !important; -} - -.ss-footer3, .ss-footer2 { - color: white; - font-size: .9rem -} - -.m-footer a { - margin: 0 10px; - color: white; - transition: color ease-in .3s -} - - .m-footer a:hove r { - color: var(--primary) - } - -.m-footer .item { - margin: 2px 0; - display: flex; - color: var(--footer-color); - align-items: center; -} - -.m-footer.social i { - font-size: 1.5rem; - color: var(--footer-color) -} - -.m-footer .item:hover { - color: #FFF !important -} - - .m-footer .item:hover i { - color: var(--primary) - } - -.m-footer i { - transition: color ease-in .3s; - margin-right: 10px; - color: var(--green); -} - -footer input, footer button { - vertical-align: middle; - color: var(--footer-color); - border: 2px solid var(--footer-border-color); - border-radius: 0; - background-color: transparent; - line-height: 23px; - border-right-width: 0; -} - -.ss-footer2 .btn { - padding: var(--input-padding) calc(var(--input-padding) * 4); - background-color: var(--footer-border-color); - color: var(--dark1); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left: none; - line-height: 30px; -} \ No newline at end of file + } \ No newline at end of file diff --git a/TWA-App/wwwroot/css/site.css b/TWA-App/wwwroot/css/site.css index 8526ea1..d605bbb 100644 --- a/TWA-App/wwwroot/css/site.css +++ b/TWA-App/wwwroot/css/site.css @@ -1,13 +1,34 @@ -:root { - --color-primary: #09205C; - --color-second: #ed1f24; +:root { + --heading: #0E1316; - --radius: 10px; + --radius: 8px; --swiper-navigation-size: 24px !important; --swiper-theme-color: #09205C !important; --border-color: #E0E1E3; --text-color-primary: #444C61; --mNav-width: 100%; + --text-heading-main: #000000; + --text-subheading-main: #1a1a1a; + --text-paragraph-main: #333333; + --text-span-main: #444444; + --text-heading-muted: #666666; + --text-subheading-muted: #777777; + --text-paragraph-muted: #888888; + --text-span-muted: #999999; + + --color-primary: #F57C00; + --color-primary-1:#bf4000; + --color-second: #022539; + --color-1: #f6f6f6; + + --text-color-white: #f5f5f5; + --text-color-lW1: #dfdfdf; + --text-color-lW2: #4E4E4E; + --text-color-dark: #3f485d; + + + --border-color-1:rgba(255, 255, 255, .2); + --border-color-2:#EDEDED } @media (min-width: 440px) { :root { @@ -17,6 +38,7 @@ + .f-header{ top: -140px } @@ -29,21 +51,6 @@ margin: 0; } -@font-face { - font-family: Branch; - src: url(/font/Branch.woff) -} - -h1, h2, h3, h4, h5, h6{ - font-family: Branch; - font-weight: 500 -} -h1 { - line-height: 61px; -} -h2{ - line-height: 52px; -} @media (min-width: 996px) { :root { @@ -72,11 +79,15 @@ h2{ a { display: block; position: relative; + cursor: pointer; color: var(--color-primary) } body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */ font-size: .9rem; font-weight: 400; + font-family: 'Mulish'; } /*Control*/ @@ -98,208 +109,165 @@ body { height: auto } -.btn-premium{ - border-radius: 50% !important; - align-content: center; - width: 35px; - height: 35px; - padding: 0; + +/*Home Page*/ +.btn { + border-radius: var(--radius); + font-weight: 600; + font-size: 1rem; + padding: 15px 34px; } -.btn-premium .atg{ - font-size: 1.5em; +.btn-primary{ + + background: var(--color-primary); + color: var(--text-color-white) +} + .btn-primary:hover { + background: var(--color-second); + } + + +.btn-second{ + background: var(--color-second); + color: var(--text-color-white); } -@media (min-width:1200px) { - .btn-premium { - border-radius: var(--radius) !important; - width: auto; - height: auto - } +.btn-second:hover{ + background: var(--text-color-white); + color: var(--text-color-dark) } -/*Page Layout*/ -.c_logo { - cursor: pointer; - height: 30px -} - - .c_logo img { - height: 100% - } - - .lg { - font-size: 1.4rem; - } - .lg2 { - color: #fff; - } - .lg1 { - color: var(--color-second); - } - #header { - box-shadow: 0 2px 3px rgba(96, 96, 96, 0.1); -} -.f-header .c_main_header { - padding-top: 10px; - padding-bottom: 10px; -} -.bg-dark, #header{ - border-bottom-left-radius: var(--radius); - border-bottom-right-radius: var(--radius) + position: fixed; + width: 100%; + z-index: 1000; } -.bg-dark .c_main_header { - padding: 0 15px; - color: white; +[class*=hblock] { + font-size: .9rem; } - -.bg-dark .fr a{ - color: white; -} - -.bg-dark .c_qTools { - margin: 6px 0; -} - - - -.bg-dark .nav-login { - border-radius: 50%; - background: transparent; - background-size: 220% 100%; - background-position: right bottom; -} - .bg-dark .nav-login:hover { - border-radius: var(--radius); - background-position: left bottom + [class*=hblock] a { + color: var(--text-color-white) } - .bg-dark .nav-login:hover i { - background-color: white; - color: var(--color-second); +.hblock1 { + border-bottom: 1px solid var(--border-color-1) +} + .hblock1 .btn { + transition: all .3s ease-in-out; } -@media (min-width: 576px){ - .bg-dark .nav-login { - border-radius: 30%; - background: linear-gradient(to right, var(--color-second) 50%,transparent 50%); - background-size: 220% 100%; - background-position: right bottom; - } - .bg-dark .nav-login:hover i { - background-color: var(--color-second); - color: white; - } +.btn-signin { + padding: 10px 25px; + font-size: .9rem; + font-weight: 500; + border: 1px solid var(--text-color-white); } -@media (min-width: 992px) and (max-width: 1400px){ - .bg-dark .nav-login { - border-radius: 50%; - background: transparent - } - .bg-dark .nav-login:hover i { - background-color: white; - color: var(--color-second); - } +.btn-signin:hover{ + color: var(--text-color-dark); + background: var(--text-color-white) } -@media (min-width: 576px) and (max-width:992px){ - .bg-dark .btn-premium { - border-radius: var(--radius) !important; - width: auto; - height: auto - } -} - - - .bg-dark .nav-login i { - background-color: var(--color-second); - font-size: .9rem; - width: 34px; - height: 34px - } - -.c_search_header { - overflow: hidden; - background-color:white; - border-bottom-left-radius: var(--radius); - border-bottom-right-radius: var(--radius) -} - -.bg-dark .ico-menu span { - background-color: white !important -} - -.bg-dark .ico-menu { - margin-right: 15px; -} - -.f-header .c_inp_search{ - border-radius: var(--radius); - margin-right: 15px; - background-color: #eaeaea -} - -.c_inp_search { - width: calc(100%-15px) -} - - .c_inp_search input { - background: transparent; - padding: 10px 80px 10px 10px; - width: 100%; - } - .c_inp_search .c_btn_search { - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - color: var(--color-primary) - } - -.c_cat { - background-color:transparent; - padding: 3px -} - - .c_cat [data-dropdown] { - background-color: #f5f5f5; - border-radius: var(--radius) - } - -.c_cat [data-dropdown] a{ - color: var(--text-color-primary) -} - -.f-header .c_filter { - padding-left: 15px; -} - - .c_filter button { - height: 100%; - width: 100%; - } - -.c_main_header { - padding: 10px 0 6px; - color: var(--color-primary) -} -.c_sec_header{ - padding: 15px 0; -} - -.langnav, .nav-mainmenu { - font-size: .80rem; - text-transform: uppercase; +.navmain { font-weight: 600; + font-size: 1rem } -#header .ico-menu{ - margin: 6px 0; + .navmain a { + text-transform: capitalize; + display: flex; + padding: 15px; + transition: color .3s ease-in-out; + color: var(--text-color-white) + } + + .navmain .nav-item:hover, .navmain .nav-item.active, .navmain [data-dropdown].active .nav-item{ + color: var(--text-color-lW1) + } + + +.sub-nav-full{ + width: 85vw !important; + left: 50%; + transform: translateX(-50%) +} + .sub-nav-full .cfull { + padding: 15px; + } +.nav-col{ + margin: 10px 20px; } +.nav-col .title{ + font-size: 1.1rem; + font-weight: 700 !important; + padding: 0 15px 15px; + border-bottom: 1px solid var(--border-color-2) +} + +.m-header .nav-mainmenu [data-dropdown] .sub-item { + position: relative; + top: 0 !important; + box-shadow: none; +} + +.sub-item .nav-link{ + font-size: .92rem; + font-weight:400; + padding: 10px 15px; + color: var(--text-color-dark); + border-radius: var(--radius); + transition: .3s all ease-in-out +} + +.sub-item .nav-link:hover{ + color: var(--color-primary); + padding-left: 25px; + background: var(--color-1) +} + + + +.navmain [data-dropdown].active .nav-item::after, .navmain .nav-item::after, .navmain [data-dropdown].active .nav-item::before, .navmain .nav-item::before { + content: ''; + display: block; + position: absolute; + height: 0; + width: 45%; + right: 50%; + left: 50%; + bottom: 0; + height: 3px; + background: var(--color-primary); + transform: scaleX(0); + transition: transform .4s ease-in-out +} + +.navmain [data-dropdown].active .nav-item::after, .navmain .nav-item::after, .navmain .nav-item.active::after { + transform-origin: center right; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + left: 5%; +} + +.navmain [data-dropdown].active .nav-item::before, .navmain .nav-item::before, .navmain .nav-item.active::before { + transform-origin: center left; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + right: 5%; +} + +.navmain [data-dropdown].active .nav-item::after, .navmain .nav-item:hover::after, .navmain .nav-item.active::after { + + transform: scale(1); +} + +.navmain [data-dropdown].active .nav-item::before, .navmain .nav-item:hover::before, .navmain .nav-item.active::before { + + transform: scaleX(1); +} .m-header { z-index: 10000; @@ -319,191 +287,198 @@ body { .m-header.show { left: 0; - } -.m-header .hd-close{ - font-size: 1.5em; - position: absolute; - top: 5px; - right: 5px; - width: 30px; - height: 30px; -} - - -.m-header .nav-mainmenu{ - margin: 20px 0; -} - - .m-header .nav-mainmenu .nav-item.active::after, .m-header .nav-mainmenu .nav-item:hover::after, .m-header .nav-mainmenu .nav-i.active .nav-item::after, .m-header .nav-mainmenu .nav-i.activeM .nav-item::after { - left: 0; - right: 50%; - width: 50% + .m-header .hd-close { + font-size: 1.5em; + position: absolute; + top: 5px; + right: 5px; + width: 30px; + height: 30px; } - .m-header .nav-mainmenu .nav-item.active::before, .m-header .nav-mainmenu .nav-item:hover::before, .m-header .nav-mainmenu .nav-i.active .nav-item::before, .m-header .nav-mainmenu .nav-i.activeM .nav-item::before { - left: 50%; - right: 0; - width: 50%; + + .m-header .nav-mainmenu { + margin: 20px 0; } -.m-header [data-dropdown].activeM .sub-item { - opacity: 1 !important; - height: auto !important; -} + .m-header .nav-mainmenu .nav-item.active::after, .m-header .nav-mainmenu .nav-item:hover::after, .m-header .nav-mainmenu .nav-i.active .nav-item::after, .m-header .nav-mainmenu .nav-i.activeM .nav-item::after { + left: 0; + right: 50%; + width: 50% + } -.m-header .nav-mainmenu a { - padding: 10px 0; - display:inline-flex; -} + .m-header .nav-mainmenu .nav-item.active::before, .m-header .nav-mainmenu .nav-item:hover::before, .m-header .nav-mainmenu .nav-i.active .nav-item::before, .m-header .nav-mainmenu .nav-i.activeM .nav-item::before { + left: 50%; + right: 0; + width: 50%; + } - .m-header .nav-mainmenu [data-dropdown] .sub-item{ + .m-header [data-dropdown].activeM .sub-item { + opacity: 1 !important; + height: auto !important; + } + + .m-header .nav-mainmenu a { + padding: 10px 0; + display: inline-flex; + } + + .m-header .nav-mainmenu [data-dropdown] .sub-item { position: relative; top: 0 !important; box-shadow: none; } - .nav-mainmenu a { - display: flex; - padding: 20px 18px - } - - .nav-mainmenu .nav-item::before, .nav-mainmenu .nav-item::after { - content: ''; - display: block; - position: absolute; - height: 0; - width: 0; - left: 50%; - right: 50%; - bottom: 0; - background: var(--red) - } - -.nav-mainmenu .nav-item::after, .nav-mainmenu .nav-item.active::after{ - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - transition: left .35s ease-out, width .35s ease-out +.rSlider { + margin: 0; } -.nav-mainmenu .nav-item::before, .nav-mainmenu .nav-item.active::before { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - transition: right .35s ease-out, width .35s ease-out -} - -.nav-mainmenu .nav-item.active::after, .nav-mainmenu .nav-item:hover::after, .nav-mainmenu .nav-i.active .nav-item::after, .nav-mainmenu .nav-i.activeM .nav-item::after { - left: 5%; - right: 45%; - width: 45%; - height: 3px -} - -.nav-mainmenu .nav-item.active::before, .nav-mainmenu .nav-item:hover::before, .nav-mainmenu .nav-i.active .nav-item::before, .nav-mainmenu .nav-i.activeM .nav-item::before { - left: 45%; - right: 5%; - width: 45%; - height: 3px -} - - -.nav-mainmenu .sub-item .nav-link { - color: var(--heading); - font-size: .78rem; - text-transform: capitalize; - padding: 10px 40px 10px 25px; - font-weight: 500; +.background { + height: 100vh; + min-height: 800px; width: 100%; - transition: all .3s ease-in-out + background-position: center center; + background-size: cover; + background-repeat: no-repeat; + background-color: transparent +} +.swiper { + border-radius: var(--radius); + min-height: 800px; + height: 100vh } - .nav-mainmenu .sub-item .nav-link:hover, .nav-mainmenu .sub-item .nav-link.active { - padding-left: 30px; - font-weight: 600; - color: var(--color-primary) - } - .nav-mainmenu .sub-item .nav-i:first-child .nav-link { - padding-top: 20px; - } - .nav-mainmenu .sub-item .nav-i:last-child .nav-link { - padding-bottom: 20px; - } - -.nav-mainmenu [data-dropdown] .sub-item { - width: auto !important; - min-width: 200px; - max-width: 280px; +.con_slider { + background-color: rgba(17, 39,88, 0.4); + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; +} +.con-feature { + top: -100px; + width: 100%; } -#header [data-dropdown] .sub-item { - top: 130px !important; -} -#fheader [data-dropdown] .sub-item { - top: 65px !important; -} -.f-header .ico-menu { - margin-left: 15px; -} -.ico-menu { - margin-left: 0; - background-color: transparent; +.flex-feature { + padding: 25px 40px 50px; + margin: 0 20px; + z-index: 100; + display: flex; + background: #fff; + height: 100%; + border-radius: var(--radius); + box-shadow: 0px 10px 45px 0px #05010112; + border: 1px solid #ededed } -.ico-menu div{ - background-color: transparent !important +.flex-feature i{ + color: var(--text-color-dark) } -.ico-menu span{ - background-color: var(--color-primary) !important; - border-radius: 2px; - height: 2px !important; +.flex-feature h3{ + text-transform: capitalize; + text-align: center; + color: var(--color-second); + margin: 0 15px 15px; } - .ico-menu:hover div:first-child span, .ico-menu.active div:first-child span { - animation: down-rotate 0.6s ease-in-out forwards; + + .flex-feature p { + color: var(--text-color-lW2); + text-align: center } - .ico-menu:hover div:last-child span, .ico-menu.active div:last-child span { - animation: up-rotate 0.6s ease-in-out forwards; +.banner-content{ + color: var(--text-color-white); +} + + .banner-content h1 { + font-size: 6rem; + opacity: 0; + transition: 2s opacity cubic-bezier(0.65, 0, 0.35, 1); + text-transform: capitalize } - .ico-menu:hover div:nth-child(2) span, .ico-menu.active div:nth-child(2) span { - animation: hide 0.6s ease-in-out forwards; + +.swiper-slide.show .banner-content h1{ + opacity: 1; +} +.swiper-slide.show .banner-content h2 { + opacity: 1; + transform: translateY(0); +} + + .banner-content h2 { + opacity: 0; + font-size: 3.6rem; + line-height: 5rem; + font-family: 'Mulish'; + transform: translateY(-100%); + transition-delay: 2.3s; + transition: 1s transform ease-in-out, .05s opacity ease-in-out; + } +.swiper-slide.show .banner-content .desc { + transform: scale(1) +} + + .banner-content .desc { + font-size: 1.2rem; + line-height: 1.4rem; + text-align: center; + max-width: 50%; + transform: scale(0); + transition-delay: 3.3s; + transition: 1s transform ease-in-out; } - .ico-menu div:nth-child(2) span { - transform-box: fill-box; - transform-origin: center; +div[class*=sec]{ + overflow:hidden +} +.banner-content .btn-primary { + transform: translateX(-100%); + transition-delay: 4.3s; + transition: .6s transform ease-in-out +} + +.banner-content .btn-second { + transform: translateX(100%); + transition-delay: 4.3s; + transition: .6s transform ease-in-out +} + +.swiper-slide.show .banner-content .btn-primary { + transform: translateX(0); +} + +.swiper-slide.show .banner-content .btn-second { + transform: translateX(0); +} + +.langnav{ + transition: .3s color ease-in-out +} + +[data-dropdown].active .langnav, .langnav:hover{ + color: var(--text-color-lW1); +} + +.langnav + .sub-item { + top: 76px; + +} + + + .langnav + .sub-item a { + padding: 10px 20px; + color: var(--text-color-dark); + font-weight: 400; + font-size: .85rem } - .nav-login{ - display:flex; - align-items:center; - padding-left: 10px; - cursor: pointer; - font-weight: 500; - transition: all .15s ease-in-out - } - .nav-login:hover i { - background-color: var(--color-second); - color: white - } - - .nav-login i { - border-radius: 50%; - font-size: .7rem; - background-color: var(--color-primary); - color: white; - width: 30px; - height: 30px; - } - - .nav-login i::before{ - position:absolute; - top:50%; - left: 50%; - transform: translate3d(-50%, -55%, 0) - } @keyframes up-rotate { 0% { @@ -540,7 +515,6 @@ body { transform: translateY(10px) rotate(-45deg) scale(0.9); } } - @keyframes hide { 29% { opacity: 1; @@ -555,578 +529,35 @@ body { } } -[class^=c_sec_] { - color: var(--color-primary); - padding: 90px 0px 87px 0px +.ico-menu { + margin-left: 0; + background-color: transparent; } - -[class^=c_sec_] h2{ - margin: 20px 0 10px 0 -} -[class^=c_sec_] p.sub-text{ - margin-bottom: 25px -} - -[class^=c_sec_] span { - color: var(--text-color-primary) -} - - [class^=c_sec_] span a { - text-decoration: underline + .ico-menu div { + background-color: transparent !important } - .c_footer { - background-color: var(--color-primary); - background-repeat: repeat-x; - font-size: .8rem; - font-weight: 500; - padding: 110px 0px 0px 0px; - color: white; + .ico-menu span { + background-color: var(--text-color-white) !important; + border-radius: 2px; + height: 2px !important; } -.nav_footer, .contact_f, .copyright { - padding: 10px -} - - .nav_footer .title, .contact_f .title { - margin-bottom: 21px; - font-size: .92rem; - font-weight: 600 - } - - .contact_f span:not(.title) { - color: #FFFFFF7D; - margin-bottom: 2px; + .ico-menu:hover div:first-child span, .ico-menu.active div:first-child span { + animation: down-rotate 0.6s ease-in-out forwards; } - .contact_f a { - color: white; - margin-bottom: 15px; - overflow-x: hidden; - } - .nav_footer a { - color: #FFFFFF7D; - transition: .3s all ease-in-out; - margin-bottom: 8px; - } - .nav_footer a:hover{ - color: white - } - .nav_footer a:hover span::before { - width: 100%; - left: 0; - } - - .nav_footer a > span{ - position:relative; - } - - .nav_footer a > span::before { - background: currentColor; - content: ""; - bottom: 0; - right: 0; - position: absolute; - height: 1px; - width: 0%; - transition: 0.3s all; - } - -.copyright { - border-top: 1px solid #F0F4F52E; - padding-top: 20px; - padding-bottom: 20px -} -/******* End ********/ -/**Page 1000*/ -.background { - height: calc(100vh - 125px); - overflow: hidden; -} - - .background img { - width: auto; - height: 100%; - position: absolute; - top: 50%; - transform: translateY(-50%); - transition: .35s ease-in-out right + .ico-menu:hover div:last-child span, .ico-menu.active div:last-child span { + animation: up-rotate 0.6s ease-in-out forwards; } - - -@media (min-width:1250px) { - .background img { - width: 100% !important; - height: auto !important - } -} -.swiper { - border-radius: var(--radius); - height: calc(100vh - 125px) -} -.con_slider{ - position:absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} -.con_booking { - border-radius: var(--radius); - padding: 20px 20px 0 20px; - background-color: white; - color: var(--text-color-primary) -} - -@media (min-width: 992px){ - .con_booking { - padding: 60px 60px 30px 60px; - } -} - -.con_sl_content { - color: white; -} - -.con_sl_content p{ - margin-top:15px; - margin-bottom: 25px; - font-size: 1.1rem; - font-weight: 500 -} -.con_sl_content button{ - color: var(--color-primary); - background-color: white; - border-color: white; -} - - .con_sl_content button:hover { - color: white; - background-color: var(--color-primary); + .ico-menu:hover div:nth-child(2) span, .ico-menu.active div:nth-child(2) span { + animation: hide 0.6s ease-in-out forwards; } -.w-images{ - overflow: hidden; - height:590px -} - -.w-images .r_item{ - position:absolute; -} - -.w-images .r1{ - height: auto; - width: auto; -} - -.w-images .r2 { - top: 160px; - width:60%; - right: 0; -} - .w-images .r3 { - top: 328px; - left: 20%; - width: 80%; - right: 20%; - } -/*** End ***/ -/**Control**/ -.btn { - display: inline-block; - font-weight: var(--btn-font-weight); - line-height: 18px; - color: var(--body-color); - text-align: center; - vertical-align: middle; - cursor: pointer; - font-weight: 600; - user-select: none; - background-color: rgba(0,0,0,0); - border: 2px solid rgba(0,0,0,0); - padding: 10px 15px; - border-radius: var(--border-radius); - font-size: .8rem; - transition: all .15s ease-in-out; -} - -.btn-animation { - color: var(--color-second); - border-color: var(--color-second); - background: linear-gradient(to right, var(--color-second) 50%, white 50%); - background-size: 200% 100%; - background-position: right bottom; -} - - .btn-animation:hover { - color: white; - background-position: left bottom; + .ico-menu div:nth-child(2) span { + transform-box: fill-box; + transform-origin: center; } -.btn-outline-primary { - color: var(--primary); - border-color: var(--primary); -} - -.btn-primary { - color: #fff; - background-color: var(--color-primary); - border-color: var(--swiper-theme-color); -} - - .btn-primary:hover { - color: var(--color-primary); - background-color: white; - border-color: var(--swiper-theme-color); - } - - .btn-second { - color: white; - background-color: var(--color-second); - } - - .btn-second:hover { - color: var(--color-second); - background-color: #fff; - border-color: var(--color-second); - } - -.btn-sm { - padding: .65rem 1.5rem; -} - -.btn-lg{ - padding: 1rem 2.2rem; - font-size: 1.2rem; - font-weight: 500 -} - -.frm-inline.search button{ - padding: 4px 15px; -} - -.frm-inline button{ - margin-left: calc(var(--radius) * -1); -} - - .frm-inline input { - border-radius: var(--radius); - border: 1px solid var(--border-color); - padding: 10px 12px; - width: 100%; - font-weight: 500; - color: var(--text-color-primary) - } - -.frm-group { - margin-left: -15px; - margin-right: -15px; -} - -.frm-input, .frm-header { - padding: 0 15px; - margin-bottom: 25px; -} - -.frm-input { - font-weight: 500; -} - -.frm-input label{ - color: var(--text-color-primary); - font-size: .92rem; - margin-bottom: 2px; - font-weight: 500 -} - - .frm-input input, .frm-input .aselect { - width: 100%; - border-bottom: 1px solid #444C6185; - background-color: #fff; - transition: .3s all ease-in-out; - font-size: .9rem; - font-weight: 400 - } - - .frm-input .con-aselect input { - border-radius: var(--radius); - padding: 0 15px; - border: 1px solid #444C6185 - } - .frm-input input { - min-height: 35px; - line-height: 35px; - } - - .frm-input .line { - position: absolute; - height: 1px; - bottom: 0; - left: 0; - z-index: 2; - width: 0; - background-color: var(--color-primary); - transition: width .4s cubic-bezier( 0.19, 0.6, 0.86, 0.01 ) - } - - .frm-input input:focus + .line, .frm-input input:hover + .line { - width: 100%; - } - - .frm-input .c-input:not(.line) input:hover, .frm-input .c-input:not(.line) input:focus, .frm-input .con-aselect.active .aselect { - border-color: var(--color-primary); - } - - - /** ASelect **/ - .con-aselect .hide { - overflow: hidden; - height: 0px !important - } - - .con-aselect .hide select:empty { - display: none; - } - - .aselect { - background: #fff !important; - cursor: pointer !important; - height: 35px; - } - - .aselect .icon { - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - transition: .3s all ease-in-out; - color: #6e6b7b - } - - - .con-aselect.active > .aselect > .icon { - transform: translateY(-50%) rotate(180deg) - } - - - .a-s-sub { - margin-top: 10px; - max-height: 250px - } - - .a-s-sub .a-search { - padding: 10px - } - - .a-s-sub .noitem { - font-size: .85rem; - padding: 10px 15px - } - - .a-s-sub .a-search input:focus { - border-color: #6e6b7b - } - - .a-s-sub .a-option { - font-size: .85rem; - padding: 10px 20px; - cursor: default; - transition: all .3s ease-in-out - } - - .a-s-sub .a-option-group { - padding: 10px 15px; - font-weight: 600; - cursor: default - } - - .a-option-group ~ .a-option { - padding-left: 25px !important - } - - .a-s-sub .a-option:hover, .a-s-sub .a-option.active { - color: white; - background: var(--color-primary) - } - - - .invalid-feedback { - display: none; - font-size: .85rem; - color: #ea5455; - } - /**End ***/ - - -/*Overlay*/ -.c-aoverlay.show { - opacity: 1; - visibility: visible; - background: rgb(86 83 96 / 0.32); - width: 100vh; -} -.c-aoverlay { - position: absolute; - top: 0; - width: 0; - height: 100vh; - right: 0; - z-index: 2000; - opacity: 0; - visibility: hidden; - transition: all ease-in .4s; -} -/*End Ovelay*/ - -/**Page 1000*/ - -/**AGrid*/ - -.AGrid { - width: 100%; - flex-wrap: wrap; - overflow:hidden; -} - - .AGrid .grid-item { - transition: all .4s ease-in-out; - } - - .AGrid .mImg { - height: 200px; - transform: scale(1); - transition: transform .3s ease-in-out - } - -.AGrid.WaterFall{ - overflow: unset !important; - display: flex; -} - -.AGrid.WaterFall .mImg{ - width: 100%; - height: auto !important -} - -.grid{ - width: 100%; -} - -.grid-card { - width: 100%; - overflow: hidden; - border-radius: var(--radius) -} - -.grid-card:hover { - cursor: pointer -} - -.grid-card:hover .mImg{ - transform: scale(1.1); -} - .grid-card:hover .layer2 { - opacity: 1 - } - -.grid-card .title{ - position: absolute; - color: white; - z-index: 2; - bottom: 10px; - left: 15px; - font-size: .85rem; - width: calc(100% - 30px); - font-weight: 600 -} -.layer1, .layer2 { - position: absolute; - width: 100%; - height: 100%; -} - -.grid-card .layer2 { - opacity: 0; - transition: opacity .15s cubic-bezier(.4,0,.2,1); - background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .4)) -} - - .grid-card .layer1 { - background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .5)); - z-index: 1 - } - -.grid-item.fh img{ - height: 350px; - width: unset!important -} - -/*----------End-------------------*/ -/****************** ATabs ***********************/ -.atabs { - display: inline-flex; - margin: 25px 0; - font-size: .8rem; - font-weight: 500; - border: 1px solid var(--color-primary); - padding: 1px 0; - border-radius: var(--border-radius) -} - - .atabs .item { - border-radius: var(--border-radius); - padding: 8px 20px; - color: var(--text-color-heading-1); - line-height: 2.1; - transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; - } - - .atabs .item:not([disabled]):not(.active):hover { - color: #7367f0 - } - - .atabs .item[disabled] { - cursor: default; - color: var(--text-disable) - } - -.animationSlide { - width: 100%; - overflow-x: hidden; -} - - .animationSlide .slideContent { - display: inline-flex; - transition: transform .6s ease-in-out - } - - .animationSlide .tabcontent.show { - opacity: 1; - } - - .animationSlide .tabcontent { - opacity: 0; - } - -.animationFade .tabcontent { - opacity: 0; - display: none; -} - - .animationFade .tabcontent.show { - display: block; - } - -.tabcontent.fade { - transition: opacity .6s linear; -} - -.atabs .item.active { - color: white; - background-color: #7367f0; - box-shadow: 0 .125rem .25rem rgba(165, 163, 174, .3); -} - -/********************* End ***********************/ diff --git a/TWA-App/wwwroot/favicon.ico b/TWA-App/wwwroot/favicon.ico deleted file mode 100644 index 63e859b..0000000 Binary files a/TWA-App/wwwroot/favicon.ico and /dev/null differ diff --git a/TWA-App/wwwroot/font/ATGIcon-Regular.woff b/TWA-App/wwwroot/font/ATGIcon-Regular.woff deleted file mode 100644 index 49888a9..0000000 Binary files a/TWA-App/wwwroot/font/ATGIcon-Regular.woff and /dev/null differ diff --git a/TWA-App/wwwroot/font/atg-admin-font.fcp b/TWA-App/wwwroot/font/atg-admin-font.fcp index 2183147..578340c 100644 Binary files a/TWA-App/wwwroot/font/atg-admin-font.fcp and b/TWA-App/wwwroot/font/atg-admin-font.fcp differ diff --git a/TWA-App/wwwroot/font/atgfont-Regular.woff b/TWA-App/wwwroot/font/atgfont-Regular.woff index 0275cf1..73ac7b6 100644 Binary files a/TWA-App/wwwroot/font/atgfont-Regular.woff and b/TWA-App/wwwroot/font/atgfont-Regular.woff differ diff --git a/TWA-App/wwwroot/font/atgfont-Regular.woff2 b/TWA-App/wwwroot/font/atgfont-Regular.woff2 index c29684e..a557b43 100644 Binary files a/TWA-App/wwwroot/font/atgfont-Regular.woff2 and b/TWA-App/wwwroot/font/atgfont-Regular.woff2 differ diff --git a/TWA-App/wwwroot/images/1000/cargo.png b/TWA-App/wwwroot/images/1000/cargo.png new file mode 100644 index 0000000..ebdd172 Binary files /dev/null and b/TWA-App/wwwroot/images/1000/cargo.png differ diff --git a/TWA-App/wwwroot/images/1000/pax.png b/TWA-App/wwwroot/images/1000/pax.png new file mode 100644 index 0000000..4c2331f Binary files /dev/null and b/TWA-App/wwwroot/images/1000/pax.png differ diff --git a/TWA-App/wwwroot/images/banner/low-angle-view-cloudscape-against-sky-sunset.jpg b/TWA-App/wwwroot/images/banner/low-angle-view-cloudscape-against-sky-sunset.jpg new file mode 100644 index 0000000..1e68a82 Binary files /dev/null and b/TWA-App/wwwroot/images/banner/low-angle-view-cloudscape-against-sky-sunset.jpg differ diff --git a/TWA-App/wwwroot/images/layout/air.png b/TWA-App/wwwroot/images/layout/air.png new file mode 100644 index 0000000..00e4d5f Binary files /dev/null and b/TWA-App/wwwroot/images/layout/air.png differ diff --git a/TWA-App/wwwroot/images/logo/icon.png b/TWA-App/wwwroot/images/logo/icon.png index 240f757..65e3550 100644 Binary files a/TWA-App/wwwroot/images/logo/icon.png and b/TWA-App/wwwroot/images/logo/icon.png differ diff --git a/TWA-App/wwwroot/images/logo/logo.jpg b/TWA-App/wwwroot/images/logo/logo.jpg deleted file mode 100644 index c6e6aab..0000000 Binary files a/TWA-App/wwwroot/images/logo/logo.jpg and /dev/null differ diff --git a/TWA-App/wwwroot/images/logo/slogo.png b/TWA-App/wwwroot/images/logo/slogo.png new file mode 100644 index 0000000..14bac8a Binary files /dev/null and b/TWA-App/wwwroot/images/logo/slogo.png differ diff --git a/TWA-App/wwwroot/images/logo/tlogo.png b/TWA-App/wwwroot/images/logo/tlogo.png deleted file mode 100644 index cb90c5b..0000000 Binary files a/TWA-App/wwwroot/images/logo/tlogo.png and /dev/null differ diff --git a/TWA-App/wwwroot/js/js-page/1000.js b/TWA-App/wwwroot/js/js-page/1000.js index b54b954..8b5af65 100644 --- a/TWA-App/wwwroot/js/js-page/1000.js +++ b/TWA-App/wwwroot/js/js-page/1000.js @@ -1,9 +1,47 @@ -import AGrid from '/js/libs/js-AGrid.js' + +function isInViewport(element) { + const rect = element.getBoundingClientRect(); + return ( + rect.top < window.innerHeight && + rect.bottom > 0 && + rect.left < window.innerWidth && + rect.right > 0 + ); +} +function updateActiveSlideShow(swiperInstance) { + swiperInstance.slides.forEach(slide => slide.classList.remove('show')); + + const activeSlide = swiperInstance.slides[swiperInstance.activeIndex]; + if (isInViewport(activeSlide)) { + activeSlide.classList.add('show'); + } +} window.L1000 = function () { + const swiper = new Swiper('.mainSlider', { + loop: true, + on: { + slideChangeTransitionEnd: function () { + updateActiveSlideShow(this); + } + } + }); + document.addEventListener('visibilitychange', function () { + if (document.visibilityState === 'hidden') { + // Remove class show khỏi tất cả các slide + swiper.slides.forEach(slide => slide.classList.remove('show')); + } - var a = new AGrid({ "element": ".GridGraphics" }); - - var a1 = new AGrid({ "element": ".AGrid-WaterFall", "gridType": "waterfall" }) + if (document.visibilityState === 'visible') { + // Add class show lại cho slide đang active + const activeSlide = swiper.slides[swiper.activeIndex]; + if (activeSlide) { + // Delay một chút để CSS animation có thời gian reset + window.requestTimeout(() => { + activeSlide.classList.add('show'); + }, 50); // delay nhẹ để đảm bảo browser detect lại class + } + } + }); } window.AScript.set("1000", true); \ No newline at end of file diff --git a/TWA-App/wwwroot/js/js-page/asyncLayout.js b/TWA-App/wwwroot/js/js-page/asyncLayout.js index a06c6de..87d4d41 100644 --- a/TWA-App/wwwroot/js/js-page/asyncLayout.js +++ b/TWA-App/wwwroot/js/js-page/asyncLayout.js @@ -1,65 +1,39 @@ import AMenu from '/js/libs/js-AMenu.js' import ALayout from '/js/libs/js-ALayout.js' +import ADropDown from '/js/libs/js-ADropDown.js' -var asyncStyleSheets = [ - 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap', - '/css/atg-font/atg-admin-font.css' -]; -window.app.loadCSS(asyncStyleSheets); +//var asyncStyleSheets = [ +// 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap', +// '/css/atg-font/atg-admin-font.css' +//]; +//window.app.loadCSS(asyncStyleSheets); class AsyncLayout extends ALayout { constructor() { super(); - this.isLoaded = false; this.layMNav = `
- - - - -
-
- -
`; - this.fHeader = `
-
-
+ + -
- +
- -
- - -
-
-
-
-
-
-
-
-
-
-
`; +
`; } _createFHeader() { document.body.insertAdjacentHTML("afterbegin", this.layMNav); - document.body.insertAdjacentHTML("afterbegin", this.fHeader); - var h = document.querySelector("#fHeader .nav-mainmenu"); - var h2 = document.querySelector(".m-header"); - var he2 = h2.querySelector(".nav-mainmenu"); - var r = document.querySelector("#header"); - r.querySelector(".nav-mainmenu").childNodes.forEach(el => { - he2.appendChild(el.cloneNode(true)); - h.appendChild(el.cloneNode(true)); - }) + //document.body.insertAdjacentHTML("afterbegin", this.fHeader); + //var h = document.querySelector("#fHeader .nav-mainmenu"); + //var h2 = document.querySelector(".m-header"); + //var he2 = h2.querySelector(".nav-mainmenu"); + //var r = document.querySelector("#header"); + //r.querySelector(".nav-mainmenu").childNodes.forEach(el => { + // he2.appendChild(el.cloneNode(true)); + // h.appendChild(el.cloneNode(true)); + //}) } dispose() { this.isLoaded = false; @@ -77,38 +51,42 @@ class AsyncLayout extends ALayout { renderMenu() { this.isLoaded = true; this._createFHeader(); - window.app.initNavs("Async"); - var hHeader = document.getElementById("header").clientHeight; - var fHeader = document.getElementById("fHeader"); + this.dpLang = new ADropDown(); + this.dpLang.bindDropDown(document.querySelector(".langnav")); + this.a1 = new AMenu("#header .navmain", ".m-header", document.querySelectorAll(".ico-menu"), true); + + // window.app.initNavs("Async"); + // var hHeader = document.getElementById("header").clientHeight; + // var fHeader = document.getElementById("fHeader"); - if (window.getOS() == "iOS") { - fHeader.classList.add("ios"); - } - const idE0 = window.app.on("App_Scrolling", (scrollY) => { - if (scrollY > hHeader && !fHeader.classList.contains("show")) { - fHeader.classList.add("show"); + // if (window.getOS() == "iOS") { + // fHeader.classList.add("ios"); + // } + // const idE0 = window.app.on("App_Scrolling", (scrollY) => { + // if (scrollY > hHeader && !fHeader.classList.contains("show")) { + // fHeader.classList.add("show"); - } - if (scrollY < hHeader && fHeader.classList.contains("show")) { - fHeader.classList.remove("show"); - } - }); - this.addCustomEvent(idE0, window.app, "Async"); - var a1 = new AMenu("#header .nav-mainmenu", ".m-header", document.querySelectorAll(".m-navbar > .ico-menu"), true); - this.listAObject.add(a1); - var a2 = new AMenu("#fHeader .nav-mainmenu", null, null); - this.listAObject.add(a2); - const idE1 = window.app.on("redirect_page", (e) => { - a1.changeActive(); - a2.changeActive(); - }); - this.addCustomEvent(idE1, window.app, "Async"); - const f = function (e) { - window.app.initNavApp(window.GetAbsoluteURL("/Search")); - } - const btnMHeader = document.getElementById("btnMHeader"); - // btnMHeader.addEventListener(this.eventName, f); - this.addSystemEvent(this.eventName, btnMHeader, f); + // } + // if (scrollY < hHeader && fHeader.classList.contains("show")) { + // fHeader.classList.remove("show"); + // } + // }); + // this.addCustomEvent(idE0, window.app, "Async"); + // var a1 = new AMenu("#header .nav-mainmenu", ".m-header", document.querySelectorAll(".m-navbar > .ico-menu"), true); + // this.listAObject.add(a1); + // var a2 = new AMenu("#fHeader .nav-mainmenu", null, null); + // this.listAObject.add(a2); + // const idE1 = window.app.on("redirect_page", (e) => { + // a1.changeActive(); + // a2.changeActive(); + // }); + // this.addCustomEvent(idE1, window.app, "Async"); + // const f = function (e) { + // window.app.initNavApp(window.GetAbsoluteURL("/Search")); + // } + // const btnMHeader = document.getElementById("btnMHeader"); + //// btnMHeader.addEventListener(this.eventName, f); + // this.addSystemEvent(this.eventName, btnMHeader, f); } } window.ALayout.set("Async", new AsyncLayout()); diff --git a/TWA-App/wwwroot/js/js-page/asyncLayout1.js b/TWA-App/wwwroot/js/js-page/asyncLayout1.js deleted file mode 100644 index 3c72894..0000000 --- a/TWA-App/wwwroot/js/js-page/asyncLayout1.js +++ /dev/null @@ -1,128 +0,0 @@ -import AMenu from '/js/libs/js-AMenu.js' -import ALayout from '/js/libs/js-ALayout.js' - - -var asyncStyleSheets = [ - 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap', - '/css/atg-font/atg-admin-font.css' -]; -window.app.loadCSS(asyncStyleSheets); - -window.Load_Menu = function () { - - //var a1 = new AMenu("#header .nav-mainmenu", ".m-header", document.querySelectorAll(".m-navbar > .ico-menu"), true); - - //var a2 = new AMenu("#fHeader .nav-mainmenu", null, null); - //console.log(document.getElementById("btnMHeader")); - //document.getElementById("btnMHeader").addEventListener("click", (e) => { - // window.app.initNavApp(window.GetAbsoluteURL("/Search")); - //}); - -} -class Async1Layout extends ALayout { - constructor() { - super(); - this.isLoaded = false; - this.layMNav = `
- - - - -
-
- -
`; - this.fHeader = `
-
-
-
- -
-
-
-
-
- -
Tất cả
- - -
-
- -
- - -
-
-
- -
-
-
`; - } - _createFHeader() { - document.body.insertAdjacentHTML("afterbegin", this.layMNav); - document.body.insertAdjacentHTML("afterbegin", this.fHeader); - var h = document.querySelector("#fHeader .nav-mainmenu"); - var h2 = document.querySelector(".m-header"); - var he2 = h2.querySelector(".nav-mainmenu"); - var r = document.querySelector("#header"); - } - dispose() { - this.isLoaded = false; - var h = document.getElementById("header"); - var f = document.getElementById("footer"); - var h1 = document.getElementById("fHeader"); - document.querySelector(".m-header").remove(); - f.removeAll(); - h.removeAll(); - h1.remove(); - window.app.removeSytemEventParent(window.app.lName); - window.app.removeCustomEventParent(window.app.lName); - super.dispose(); - } - renderMenu() { - this.isLoaded = true; - this._createFHeader(); - window.app.initNavs("Async1"); - var hHeader = document.getElementById("header").clientHeight; - var fHeader = document.getElementById("fHeader"); - - if (window.getOS() == "iOS") { - fHeader.classList.add("ios"); - } - window.app.on("App_Scrolling", (scrollY) => { - if (scrollY > hHeader && !fHeader.classList.contains("show")) { - fHeader.classList.add("show"); - - } - if (scrollY < hHeader && fHeader.classList.contains("show")) { - fHeader.classList.remove("show"); - } - }); - //this.addCustomEvent(idE0, window.app, "Async1"); - //var a1 = new AMenu("#header .nav-mainmenu", ".m-header", document.querySelectorAll(".m-navbar > .ico-menu"), true); - - //var a2 = new AMenu("#fHeader .nav-mainmenu", null, null); - //const idE1 = window.app.on("redirect_page", (e) => { - // a1.changeActive(); - // a2.changeActive(); - //}); - //this.addCustomEvent(idE1, window.app, "Async"); - //const f = function (e) { - // window.app.initNavApp(window.GetAbsoluteURL("/Search")); - //} - //const btnMHeader = document.getElementById("btnMHeader"); - //// btnMHeader.addEventListener(this.eventName, f); - //this.addSystemEvent(this.eventName, btnMHeader, f); - } - -} -window.ALayout.set("Async1", new Async1Layout()); -window.AScript.set("asyncLayout1", true); \ No newline at end of file