/* php cmdShortpixelOptimize.php --apiKey=vfOYhKP3dvXIWNXun3RZ --folder=/media/public/www/lic-consult.com/images --createWebP --createAVIF */
/*******************************************************************************
* Define corporate colors and other variables for easy maintenance
*******************************************************************************/
:root {
--lic-primary: #03357e;
--lic-primary-dark: #042e6a;
--lic-primary-transparent: rgba(3, 53, 126, 0.8);
--lic-blue: #0271e0;
--lic-light: #f8f5ee;
--lic-secondary: #de911d;
--lic-secondary-dark: #b37f1a;
--lic-secondary-hover: #e8a849;
--lic-text: #333333;
--lic-white: #ffffff;
--lic-gray: #8B97A8;
--lic-separator: #faf9f76b; /* used for the footer list items */
--lic-border-radius: 0.5rem;
--lic-transition: 0.3s ease;
--lic-header-height: 77px;
}
/* Set the background color of the page to the dark corporate color */
html body {
background: var(--lic-white);
/* Reset + Overflow verhindern */
margin: 0;
padding: 0;
overflow-x: hidden; /* verhindert horizontalen Scroll */
box-sizing: border-box;
}
/*******************************************************************************
* Header
*******************************************************************************/
/* Use a little transparent background image */
#t4-header {
background:
linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
url('../../../../images/backgrounds/background-hexagon-blue.png');
}
/* Make T4 header sticky manually */
.t4-header {
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
height: var(--lic-header-height)!important;
min-height: var(--lic-header-height)!important;
}
/* Adjust the height of the top menu bar */
.t4-megamenu .navbar-nav > li > a, .t4-megamenu .navbar-nav > li > .nav-link {
height: 40px;
line-height: 40px;
}
/* Change the background color of the header to the corporate color */
div#t4-header {
background-color: var(--lic-primary-transparent);
}
/*******************************************************************************
* Header - Language Switcher
*******************************************************************************/
/* Correct the margin */
div#t4-header .mod-languages {
margin-right: 10px;
}
/* Set the text and link color */
div#t4-header .mod-languages li a {
color: var(--lic-white);
}
/* Not yet used */
div#t4-header .mod-languages li[class="lang-active"] a {
color: var(--lic-secondary);
}
/* Hide the switcher on screens smaller than 1072 px */
@media (max-width: 1071.98px) {
div#t4-header .mod-languages {
display: none;
}
}
/*******************************************************************************
* Header - CTA Button
*******************************************************************************/
/* CTA Button */
div#t4-header .custom {
margin-top: 16px;
}
div#t4-header .btn-outline-orange {
color: var(--lic-secondary);
border-color: var(--lic-secondary);
}
/* CTA Button Hover */
div#t4-header .btn-outline-orange:hover {
color: var(--lic-white);
background-color: var(--lic-secondary-hover);
border-color: var(--lic-secondary-hover);
}
/*******************************************************************************
* Mega Menu
*******************************************************************************/
.lic-mega-menu {
padding-top: 19px!important;
background-color: rgba(3, 53, 126, 0.9)!important;
}
.lic-mega-menu a {
color: var(--lic-white)!important;
}
.lic-mega-menu img {
display: block!important;
margin-bottom: 5px;
box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.4);
}
.t4-megamenu .lic-mega-menu.dropdown-menu {
border: none;
}
.t4-megamenu .dropdown-menu li > .nav-link {
line-height: 1rem;
}
/* Make sure the images are in line even if the title is not the same length */
.mega-nav .nav-link {
display: flex;
flex-direction: column;
}
.mega-nav .nav-link img {
display: block;
}
.mega-nav .image-title {
display: block;
min-height: 2.5em;
}
/*******************************************************************************
* Menu Colors
*******************************************************************************/
/* Links */
.t4-megamenu .navbar-nav > li > a, .t4-megamenu .navbar-nav > li > .nav-link {
color: var(--lic-white);
}
/*******************************************************************************
* Dropdown Menu
********************************************************************************/
/* Dropdown box shadow and border */
.t4-megamenu .dropdown-menu {
/* box-shadow: 5px 5px 0 rgba(0,0,0, 0.3); */
border: 1px solid var(--lic-primary);
}
/* Caret Sign */
.t4-megamenu .dropdown-toggle .item-caret::before {
border-top: 4px solid var(--lic-secondary);
}
/* Links */
.t4-megamenu .dropdown-menu li.active > a {
color: var(--lic-secondary);
}
/* Hover links */
.t4-megamenu .dropdown-menu li:hover > a {
color: var(--lic-secondary)!important;
}
/* Make sure menu items fits in 1 line */
.t4-megamenu .dropdown-menu-inner {
min-width: 250px!important;
}
/*******************************************************************************
* Off-Canvas Menu
*******************************************************************************/
/* Menu icon */
#triggerButton .patty,
#triggerButton .patty::before,
#triggerButton .patty::after {
background-color: #fff !important;
}
/* Do not scale down the image */
div.t4-offcanvas .t4-off-canvas-header .logo-img {
max-height: none;
}
.t4-offcanvas .t4-off-canvas-header a img {
max-height: none;
}
/* Set the background color */
#off-canvas-right-push, .t4-off-canvas-header {
background-color: var(--lic-primary)!important;
}
/* No images in off canvas menu */
#off-canvas-right-push img {
display: none;
}
/* Close Button */
#off-canvas-right-push .c-button__text {
color: var(--lic-white)!important;
}
/* Text in the contact section is white */
#off-canvas-right-push .info-contact {
color: var(--lic-white)!important;
margin-top: 40px; /* Added a top border and need some more space to it */
}
/* Links in the contact section are orange */
#off-canvas-right-push .info-contact a {
color: var(--lic-secondary)!important;
}
/* Hover links in the contact section are light orange */
#off-canvas-right-push .info-contact a:hover {
color: var(--lic-secondary-hover)!important;
}
/* Submenu items */
div.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .btn-toggle::after {
color: var(--lic-white)!important;
}
div.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .btn-toggle {
border-color:var(--lic-white)!important;
}
.t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item, .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link {
color: var(--lic-white);
}
div.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .active > a, div.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .active > span {
color: var(--lic-secondary-hover)!important;
}
/* Submenu head title */
div.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back {
color: var(--lic-secondary-hover);
}
/* Links */
#off-canvas-right-push .navbar-nav > li > a, #off-canvas-right-push .navbar-nav > li > .nav-link {
color: var(--lic-white);
}
/* Hover links */
.t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item:hover {
color: var(--lic-secondary-hover)!important;
}
/* Active links */
#off-canvas-right-push .navbar-nav > li.active > a, #off-canvas-right-push .navbar-nav > li.active > .nav-link {
color: var(--lic-secondary);
}
/* Arrow on hover: orange */
div.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .btn-toggle:hover::after {
color: var(--lic-secondary-hover) !important;
}
/* Language Switcher */
.lic-offcanvas-lang-switcher {
text-align: right;
}
/*******************************************************************************
* Home - Section 1 (Hero image and slider)
********************************************************************************/
/* Note: class "lic-home-hero" is set via Javascript, since the template does not support the module classes here */
/* More space before and after the hero text */
/* .lic-home-hero .acm-hero.style-1 .hero-item h1 {
padding-top: 150px;
padding-bottom: 150px;
} */
/* Change the decor color of the hero text background */
/* .lic-home-hero .acm-hero.style-1 .hero-item .color-decor {
margin-top: 150px;
background: var(--lic-secondary);
} */
/* Change the hero text color to white and remove the top margin (= white space) */
/* .lic-home-hero .acm-hero.style-1 .hero-item h1 {
margin-top: 0px;
color: var(--lic-white);
} */
.lic-home-hero {
background-image: url('../../../../images/home/hero/glpi-contract-and-license-management.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
/* Ensure the section has height */
/* min-height: 375px; */
/* max-height: 34rem; */
/* min-height: clamp(320px, 53vh, 700px); */
/* min-height: 60vh; */
/* max-height: 800px; */
/* Optional: Add an overlay for better text readability */
position: relative;
/* Adjust for sticky header */
top: -var(--lic-header-height);
}
/* Change the text color of the article slider to the corporate color */
/* Note: Setting the text color in the module settings, is overwritten by this class anyway: */
.is_article3dslider .is_3dslider_s5 .Testimonial .box .box-right p {
color: var(--lic-text);
}
.is_article3dslider .is_3dslider_s5 .mod-articles-category-readmore a {
color: var(--lic-text);
border-color: var(--lic-text);
}
/* Change the link color in the intro text */
.is_article3dslider .is_3dslider_s5 a {
color: var(--lic-secondary);
}
/* Adjust the spacing of the article slider */
.is_articlecarousel4dslider .Testimonial ul.flip-items.flipster__container {
padding-bottom: 100px;
}
/* Adjust the spacing of the article slider */
.is_articlecarousel4dslider .Testimonial {
padding-top:0;
}
/* Adjust the height of the article slider */
.lic-home-hero {
min-height: 680px;
}
@media (max-width: 1299px) {
.lic-home-hero {
min-height: 580px;
}
}
@media (max-width: 991.98px) {
.lic-home-hero {
min-height: 585px;
}
/* Adjust the spacing above the title */
.lic-home-slider .Testimonial .box {
padding-top: 10px!important;
padding-bottom: 15px!important
}
}
/* @media (max-width: 767.98px) {
.lic-home-hero {
min-height: 585px;
}
} */
@media (max-width: 479px) {
.lic-home-hero {
min-height: 720px;
}
/* Adjust the spacing above the title */
.lic-home-slider .Testimonial .box {
padding-top: 10px!important;
}
}
/* Optional: Dark overlay for text contrast */
.lic-home-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(from var(--lic-primary-dark) r g b / 80%);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(2px);
z-index: 1;
}
/* Ensure content stays above the overlay */
.lic-home-hero .t4-section-inner {
position: relative;
z-index: 2;
}
/* Adjust the height of the article slider */
.lic-home-slider .box {
min-height: 350px!important;
margin-top: 125px;
}
/* .flipster__item.flipster__item--current .box {
border: 1px solid red;
min-height: 400px!important;
min-width: 800px!important;
} */
/* Overlay for text contrast */
.lic-home-slider .box::after {
background-color: rgba(255, 255, 255, 0.85)!important;
}
/* Remove ugly icon before the title and the read more link */
.lic-home-slider a:before {
content: ''!important;
}
/* Fix the padding after removing the icon */
.lic-home-slider .mod-articles-title.full_box_link a {
padding-left: 0;
}
/* Links in the introtext also has icons and must be corrected */
.lic-home-slider .mod-articles-introtext a {
display: inline!important;
margin-left: -32px;
}
/* Make the title a little bit bigger and in corporate color */
.lic-home-slider .mod-articles-title a {
font-size: 1.75rem;
line-height: 2rem;
color: var(--lic-secondary) !important;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* The right navigation arrow is not centered on large screens*/
@media (min-width: 999px) {
.flipster__button.flipster__button--next {
width: 10px!important;
}
}
/*******************************************************************************
* Home - Section 2 (Statistics)
********************************************************************************/
/*******************************************************************************
* Home - Section 3 (About Us)
********************************************************************************/
/* Add a light background color to the section */
.lic-home-about-us .intro-image {
box-shadow: 0 1rem 2rem rgba(0,0,0,.15) !important;
}
/* Stats list is not needed/wanted */
.lic-home-about-us .stats-list {
display: none;
}
/* Less space between the text and the action button */
.lic-home-about-us .section-title-wrap {
margin-bottom: 0px;
}
/*******************************************************************************
* Home - Section 4 (Awards)
********************************************************************************/
/* See Javascript */
/*******************************************************************************
* Home - Section 5 (What we do)
********************************************************************************/
/* same shadow as the shadow class of bootstrap */
.lic-home-what-we-do img {
box-shadow: var(--t4-box-shadow) !important;
}
/* on smaller screens the background does not look good anymore */
@media (max-width: 1399px) {
.lic-home-what-we-do {
background-image: none;
}
}
/*******************************************************************************
* Home - Section 6 (Why choose us)
******************************************************************************/
/* Add some padding to the section */
.lic-home-why-choose-us {
padding-top: 78px;
}
/* Center the headline and short description */
div.lic-home-why-choose-us .mod-title-wrap {
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
/* Title a little bit bigger and in uppercase letters */
.lic-home-why-choose-us h3 {
text-transform: uppercase;
margin-top: 0;
}
/* Icon color in corporate color */
.lic-home-why-choose-us i::before {
color: var(--lic-secondary);
}
/* Vectors and icons by Donnnno in GPL License via SVG Repo */
/* Tools: Vectors and icons by Carbon Design in Apache License via SVG Repo */
/* Custom HTML Module partly generated by KI */
/* ============================================
WHY CHOOSE US - RADIAL LAYOUT
============================================ */
/* Radial Layout Container */
.radial-layout {
position: relative;
width: 100%;
max-width: 1300px;
height: 950px;
margin: 0 auto;
}
.rocket-spin {
width: 100%;
height: 100%;
transition: transform .8s ease;
}
.lottie-wrapper:hover .rocket-spin {
transform: rotate(360deg);
}
/* Center Lottie Animation */
.center-lottie {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 7;
display: flex;
align-items: center;
justify-content: center;
}
.lottie-wrapper {
width: 240px;
height: 240px;
background: var(--lic-white);
border-radius: 50%;
padding: 15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.center-lottie lottie-player {
width: 100% !important;
height: 100% !important;
}
/* Feature Cards */
.radial-item {
position: absolute;
width: 300px;
z-index: 5;
}
.item-top {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.item-right {
top: 30%;
right: 0;
transform: translateX(0);
}
.item-bottom-right {
top: 70%;
right: 15%;
}
.item-bottom-left {
top: 70%;
left: 15%;
}
.item-left {
top: 30%;
left: 0;
transform: translateX(0);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 991.98px) {
.radial-layout {
height: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem 0;
}
.center-lottie {
position: relative;
top: auto;
left: auto;
transform: none;
margin-bottom: 1rem;
order: -1;
}
.radial-item {
position: relative;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
width: 100%;
max-width: 400px;
}
}
@media (max-width: 575.98px) {
.why-choose-us h2 {
font-size: 1.5rem;
}
.center-lottie {
width: 180px;
height: 180px;
}
}
/*******************************************************************************
* Home - Section 7 (Contact form)
******************************************************************************/
/*******************************************************************************
* Articles
********************************************************************************/
/* Services */
.hex-icon {
width: 200px;
height: 200px;
background: #1c8af7;
clip-path: polygon(
25% 5%, 75% 5%,
100% 50%,
75% 95%,
25% 95%,
0% 50%
);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem auto;
}
.hex-icon i {
font-size: 5rem;
color: var(--lic-white);
}
@media (max-width: 1199px) {
.hex-icon {
width: 150px;
height: 150px;
}
.hex-icon i {
font-size: 3rem;
}
}
/* Imprint */
.com-content-article.item-page.single-blogs p,
.com-content-article.item-page.single-blogs ul {
margin-bottom: 1.5em;
}
/*******************************************************************************
* About Us
********************************************************************************/
/*******************************************************************************
* About Us - Consultants
********************************************************************************/
/* Center the headline and short description */
div.lic-about-us-consultants .mod-title-wrap {
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
/* Center the headline and short description */
.lic-about-us-consultants .features-title,
.lic-about-us-consultants .features-descriptions {
text-align: center;
}
/* More space between the images and the text */
.lic-about-us-consultants img {
margin-bottom: 2rem;
}
/* Make the images hexagonal and responsive */
.lic-about-us-consultants img {
width: 100%;
height: auto;
aspect-ratio: 504 / 504;
object-fit: cover;
clip-path: polygon(
25% 5%, 75% 5%,
100% 50%,
75% 95%,
25% 95%,
0% 50%
);
display: block;
}
/*******************************************************************************
* About Us - Timeline
********************************************************************************/
/* Center the headline and short description */
div.lic-about-history .mod-title-wrap {
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
/* Make the images higher */
.is_articletimeline .newsflash-image {
max-height: none;
}
/*******************************************************************************
* Category Layout
********************************************************************************/
/* ============================================
Alternating 2-Column Blog Layout
============================================ */
.blog-alternating-layout {
display: flex;
flex-direction: column;
gap: 3rem;
}
.alternating-article {
width: 100%;
}
.alternating-item-inner {
display: flex;
flex-wrap: wrap;
}
/* Default: Image LEFT, Text RIGHT */
.alternating-item-inner .alternating-image-col {
order: 1;
}
.alternating-item-inner .alternating-content-col {
order: 2;
}
/* Border is not needed, because the tag section already includes one */
.alternating-item-inner .alternating-tags-col {
order: 3;
margin-top: 1rem;
padding-top: 1rem;
/* border-top: 1px solid #e9ecef; */
}
/* Layout RIGHT: Image RIGHT, Text LEFT */
.layout-right .alternating-item-inner .alternating-image-col {
order: 2;
}
.layout-right .alternating-item-inner .alternating-content-col {
order: 1;
}
.alternating-item-inner {
align-items: flex-start !important; /* Override align-items-center */
}
.alternating-content-col .item-content {
padding-top: 0;
}
.alternating-content-col .item-title {
margin-top: 0;
margin-bottom: 0.5rem;
}
.alternating-image-col figure {
margin-top: 0;
margin-bottom: 0;
}
.alternating-image-col img {
display: block;
}
/* Responsive: Stack on mobile */
@media (max-width: 767px) {
.alternating-item-inner .alternating-image-col,
.alternating-item-inner .alternating-content-col {
order: unset !important;
}
.alternating-image-col {
margin-bottom: 1rem;
}
}
/* Optional: Visual separation between articles */
.alternating-article {
padding-bottom: 2rem;
border-bottom: 1px solid #dee2e6;
}
.alternating-article:last-child {
border-bottom: none;
}
/*******************************************************************************
* Contact and Forms general
********************************************************************************/
/* Background image for the forms (see plugin Placeholders) */
.lic-background-white {
background-image: url('../../../../images/backgrounds/background-hexagon-white.png');
background-position: center center;
}
/* Hide background on screens < 991px */
@media (max-width: 991px) {
.lic-background-white {
background-image: none;
}
}
@media (min-width: 1199px) {
/* Align the title and the form */
.mt-n6 {
margin-top: -6rem !important;
}
.mt-n7 {
margin-top: -7rem !important;
}
}
/* Remove padding from the forms to have it aligned on the left on small screens */
@media (max-width: 1199px) {
.cf-form-wrap {
padding-left: 0px!important;
padding-right: 0px!important;
}
}
/*******************************************************************************
* Page Navigation
********************************************************************************/
/* For page navigation we use the article text instead of Previous/Next (see Plugin Content - Page Navigation) */
/* Give more space for the arrows and so for the text too (original: 12rem) */
ul.pagenav {
padding-right: 3rem;
padding-left: 3rem;
}
/* Limit the text width to avoid overlapping the centered icon */
.pager.pagenav .previous span,
.pager.pagenav .next span {
display: inline-block;
max-width: 500px;
}
/* Reduce the text width for smaller screens */
@media (max-width: 1399px) {
.pager.pagenav .previous span,
.pager.pagenav .next span {
max-width: 400px;
}
}
@media (max-width: 1199px) {
.pager.pagenav .previous span,
.pager.pagenav .next span {
max-width: 300px;
}
}
@media (max-width: 991px) {
.pager.pagenav .previous span,
.pager.pagenav .next span {
max-width: 200px;
}
ul.pagenav {
padding-right: 2rem;
padding-left: 2rem;
}
}
@media (max-width: 767px) {
.pager.pagenav .previous span,
.pager.pagenav .next span {
display: none;
}
}
/* Change link hover color */
ul.pagenav li > a:hover {
color: var(--lic-secondary);
}
/*******************************************************************************
* Contact Section
********************************************************************************/
#t4-section-10 {
position: relative;
background: linear-gradient(
180deg,
#ffffff 0%,
#fcfbf8 35%,
#f7f2e8 75%,
#f4eee2 100%
);
}
#t4-section-11 {
position: relative;
background: linear-gradient(
180deg,
#f4eee2 0%,
#f8f7f3 45%,
#eef5fb 80%,
#e3eefb 100%
);
}
/*******************************************************************************
* Footer
********************************************************************************/
/*
Footer - The footer is a little bit different than the original T4 footer.
We use a grid layout to have more control over the layout and to avoid problems with long menu items.
The grid layout is used for screens larger than 1199px, for smaller screens we use the original T4 layout.
*/
.t4-footer-inner .row {
display: grid;
grid-template-columns:
minmax(220px, max-content)
minmax(260px, max-content)
minmax(260px, max-content)
minmax(260px, 1fr);
gap: 3rem;
justify-content: center;
}
.t4-footer-inner .row > .col {
width: auto;
max-width: none;
}
@media (max-width: 1750px) {
.t4-footer-inner .row {
grid-template-columns:
minmax(260px, max-content)
minmax(260px, max-content);
justify-content: center;
}
}
@media (max-width: 1099px) {
.t4-footer-inner .row {
grid-template-columns: minmax(260px, 100%);
justify-content: stretch;
}
}
.lic-footer-information .menu-item-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (max-width: 1199px) {
#t4-footer .container {
margin-left: 50px;
}
}
/* Set background image */
#t4-footer {
background:
linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
url('../../../../images/backgrounds/background-hexagon-blue.jpg');
background-size: cover;
background-position: center;
}
/* More space for the footer */
#t4-footer .container {
max-width: 1600px;
}
/* Do not center the footer */
/* Footer background and text color */
#t4-footer, .t4-footer-inner {
background-color: transparent!important;
text-align: left;
color: var(--lic-white);
}
.t4-footer-inner .navbar {
justify-content: flex-start;
}
/* Module titles in white */
#t4-footer .module-title {
color: var(--lic-white);
}
/* Links in white */
#t4-footer a {
color: var(--lic-white);
}
/* Hover links in orange */
#t4-footer a:hover {
color: var(--lic-secondary);
}
/* Due to the long menu items we must stack earlier than the original 576px */
@media (min-width: 690px) and (max-width: 1255px) {
#t4-footer .row > * {
flex: 0 0 50%;
width: 50%;
}
}
@media (max-width: 689px) {
#t4-footer .row > * {
flex: 0 0 100%;
width: 100%;
}
}
/* Correct the top margin to have the switcher in the same line with the last menu item of the block "Services".
Align the switcher to the right to avoid problems with margins/paddings especially on smaller screens.
*/
.lic-footer-lang-switcher {
margin-top: 20px;
text-align: right;
}
/* The footer color is white, the active language has a white background */
.lic-footer-lang-switcher ul li.lang-active a {
color: var(--lic-text)!important;
}
/*******************************************************************************
* Footer - Address
********************************************************************************/
/* Set a little margin to the text below the logo */
.lic-logo-footer {
margin-bottom: 10px;
}
/*******************************************************************************
* Footer - Services
********************************************************************************/
/* Hide images of mega menu in the footer */
.lic-footer-services img,
.lic-footer-tools img {
display:none;
}
/* Add a border between the list items to have a better visual separation */
.lic-footer-services > li:not(:last-child) {
border-bottom: 1px dashed var(--lic-separator);
}
/* Add an icon before the list items in the footer services list to have a better visual separation */
.lic-footer-services > li > a::before {
content: "\F285"; /* bi-chevron-right */
font-family: "bootstrap-icons";
margin-right: 10px;
}
/* Highlight the current menu item in the footer services list */
.lic-footer-services li.current .image-title {
color: var(--lic-secondary) !important;
}
/*******************************************************************************
* Footer - Tools
********************************************************************************/
/* Add a border between the list items to have a better visual separation */
.lic-footer-tools > li:not(:last-child) {
border-bottom: 1px dashed var(--lic-separator);
}
/* Add an icon before the list items in the footer tools list to have a better visual separation */
.lic-footer-tools > li > a::before {
content: "\F285"; /* bi-chevron-right */
font-family: "bootstrap-icons";
margin-right: 10px;
}
/* Highlight the current menu item in the footer tools list */
.lic-footer-tools li.current .image-title {
color: var(--lic-secondary) !important;
}
/*******************************************************************************
* Footer - Information
********************************************************************************/
/* Add a border between the list items to have a better visual separation */
.lic-footer-information > li:not(:last-child) {
border-bottom: 1px dashed var(--lic-separator);
}
/* Add an icon before the list items in the footer information list to have a better visual separation */
.lic-footer-information > li > a::before {
content: "\F285"; /* bi-chevron-right */
font-family: "bootstrap-icons";
margin-right: 10px;
}
/* Highlight the current menu item in the footer information list */
.lic-footer-information li.current > a,
.lic-footer-information li.active > a {
color: var(--lic-secondary) !important;
font-weight: normal!important;
}
/*******************************************************************************
* Footer - Information - Sitemap
********************************************************************************/
/* Reduce the width of the sitemap to avoid too much space left and right */
.osmap-items {
max-width: 600px;
margin: 0 auto;
}
/* Remove the bullets and the padding of the list to have it aligned with the text above */
#osmap ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Remove the space between the list items to have it aligned with the text above */
#osmap > ul > li {
margin-bottom: 1rem;
}
/* Add a little space for the submenus and a left border to have a better visual separation */
#osmap ul ul {
margin: .5rem 0 .75rem 1.5rem;
padding-left: 1rem;
border-left: 2px solid var(--bs-border-color);
}
/* Links: Use corporate color and remove the underline */
#osmap a {
display: inline-flex;
align-items: center;
gap: .6rem;
padding: .35rem .6rem;
color: var(--lic-primary)!important;
text-decoration: none;
border-radius: .375rem;
transition: all .2s ease;
}
/* Hover links: Use light orange */
#osmap a:hover {
color: var(--lic-secondary-hover)!important;
}
/* Icons: Use Bootstrap Icons and corporate color */
#osmap a::before {
font-family: "bootstrap-icons";
content: "\F392"; /* bi-file-earmark-text */
font-size: 1rem;
color: var(--lic-secondary);
flex-shrink: 0;
}
/* Submenu items: Use bold font weight */
#osmap .osmap-has-children > a {
font-weight: 600;
}
/* Submenu items: Use folder icon for items with children */
#osmap .osmap-has-children > a::before {
content: "\F3D3"; /* bi-folder */
}
/*******************************************************************************
* Copyright
********************************************************************************/
/* Copyright background and text color */
#t4-copyright {
height: 30px;
padding: 0;
padding-top: 3px;
border: none;
background-color: var(--lic-secondary-dark);
color: var(--lic-primary-dark);
}
/*******************************************************************************
* Back to Top Button
********************************************************************************/
/* Back to top button background and text color */
#back-to-top {
background-color: var(--lic-secondary);
color: var(--lic-white);
}
#back-to-top:hover {
background-color: var(--lic-secondary-hover);
color: var(--lic-white);
}
/*******************************************************************************
* Read more
********************************************************************************/
/* Hidden initial state with slide-up animation */
.text-box {
opacity: 0;
transform: translateY(80px);
transition:
opacity 1.2s ease,
transform 1.2s ease;
will-change: transform, opacity;
}
/* Visible state after entering viewport */
.text-box.in-view {
opacity: 1;
transform: translateY(0);
}
/* Collapsed text container with height restriction */
.text-content {
max-height: 140px;
overflow: hidden;
position: relative;
transition: max-height 1s ease;
}
/* Gradient fade-out at bottom of collapsed content */
.text-content::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,1)
);
}
/* Expanded state showing full content */
.text-box.open .text-content {
max-height: 2000px;
}
/* Remove fade overlay when expanded */
.text-box.open .text-content::after {
display: none;
}
/* Read more button styling */
.read-more {
margin-top: 15px;
cursor: pointer;
}
/*******************************************************************************
* Outline info is used for CTA buttons (see plugin Placeholders)
********************************************************************************/
.btn-outline-info {
color: var(--lic-primary)!important;
border-color: var(--lic-primary)!important;
}
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active,
.show > .btn-outline-info.dropdown-toggle {
color: var(--lic-secondary)!important;
background-color: var(--lic-primary)!important;
border-color: var(--lic-primary)!important;
}
.btn-outline-info:hover i,
.btn-outline-info:focus i,
.btn-outline-info:active i {
color: var(--lic-secondary)!important;
}
/* Sticky consultation button */
.consultation-button {
/* background-color: var(--lic-secondary-dark)!important; */
text-transform:none;
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 1050;
display: flex;
align-items: center;
gap: 0.75rem;
width: 58px;
padding: 0.85rem 1rem;
overflow: hidden;
white-space: nowrap;
border-radius: 0.75rem 0 0 0.75rem;
text-decoration: none;
transition: width 0.35s ease;
}
/* Icon */
.consultation-button i {
flex-shrink: 0;
font-size: 1.5rem;
}
/* Label */
.consultation-button span {
opacity: 0;
font-weight: 600;
transition: opacity 0.2s ease 0.1s;
}
/* Only enable hover animation on devices that actually support hover */
@media (hover: hover) and (pointer: fine) {
.consultation-button:hover {
width: 285px;
}
.consultation-button:hover span {
opacity: 1;
}
}
/* Hide the button on phones and tablets */
@media (max-width: 1199px) {
.consultation-button {
display: none;
}
}
/*******************************************************************************
* Shared
********************************************************************************/
/* Background image for the main body */
#t4-main-body {
background-image: url('../../../../images/backgrounds/background-hexagon-white.png');
background-position: center center;
}
/* Background color for the main content area (articles, tags, etc.) to overlap the white background image */
.lic-home-what-we-do .container,
.com-tags-tag.tag-category,
.desc-article,
.item-content,
.article-body,
.tags.list-inline {
background-color: var(--lic-white);
}
/* Pagination and newsletter have the same background color */
.pager.pagenav,
.lic-light {
background-color: var(--lic-light);
}
/* Make sure the browser scrolls to the correct position */
#lic-video-booking,
#start-your-project-now {
scroll-margin-top: calc(var(--lic-header-height) + 10px);
}
/* Add an icon before the list items in the list group (Bootstrap) */
/* Note: Only on flush groups, since Joomla! uses the normal list group for e. g. Tag listing */
.list-group-flush .list-group-item {
display: flex;
align-items: center;
gap: 0.75rem;
}
.list-group-flush .list-group-item::before {
content: "\f138";
font-family: "bootstrap-icons";
flex-shrink: 0;
color: var(--bs-primary);
}
/* Social Icons: Use Bootstrap Icons and corporate color */
.social-icon {
border: 1px solid #828282;
border-radius: 50%;
color: var(--body-text-color);
display: inline-block;
height: 28px;
line-height: 24px;
text-align: center;
width: 28px;
transition: all .2s ease-in-out;
}
/* Hover effect for cards (Bootstrap does not have such a class) */
.card-hover {
transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .15) !important;
}
/* Reduce the space to the first bottom module */
/* .t4-main-body {
padding-top: 3rem!important;
padding-bottom: 0!important;
} */
.lic-img-wrap img {
display: block;
width: 100%;
height: auto;
z-index:1!important;
position: relative;
} */
.lic-divider {
margin-top: 5rem;
margin-bottom: 1rem;
color: var(--lic-primary);
border-width: 2px;
}
/* Override the purple class with the corporate color */
.text-purple {
color: var(--lic-secondary);
}
/* Capitalizing looks ugly on words, like "the" */
.section-title-wrap .main-heading {
text-transform: none;
}
/* Remove background for badges in tags */
.tags.list-inline .badge-info {
background-color: transparent;
color: var(--lic-primary);
/* border: 1px solid var(--lic-secondary); */
}
/* More space between the tag image and the text */
.com-tags-tag__items.form-inline .item-tag-image {
margin-right: 30px;
}
/* Alerts are overlapping the tag image on the tag list view */
.com-tags-tag__items.form-inline .alert-light {
position: relative;
z-index: 1;
border: none;
background-color: transparent;
}
/* Use white link color for the read more button in the tag list view */
.com-tags-tag.tag-category .list-group .list-group-item a:hover {
color: var(--lic-white)!important;
}
/*******************************************************************************
* Convert Forms
********************************************************************************/
/* Use corporate color instead of the ugly green */
.convertforms.cf-success .cf-response {
background-color: var(--lic-primary);
}
.convertforms {
background: linear-gradient(
135deg,
#ffffff 0%,
#faf7f0 45%,
#f2f7fc 100%
);
}
.zenc-captcha {
margin-bottom: 20px!important;
}