/* General */
:root {
    --border-radius: 4px;
    --border-radius2x: 8px;
    --default: #777;
}
/* Skin Colors */
:root {
    --primary: #cc4642;
    --primary-100: #c13834;
    --primary-200: #b73531;
    --primary-300: #ac322f;
    --primary--100: #d15a56;
    --primary--200: #d46360;
    --primary--300: #d76d6a;
    --primary-rgba-0: rgba(204, 70, 66, 0);
    --primary-rgba-10: rgba(204, 70, 66, 0.1);
    --primary-rgba-20: rgba(204, 70, 66, 0.2);
    --primary-rgba-30: rgba(204, 70, 66, 0.3);
    --primary-rgba-40: rgba(204, 70, 66, 0.4);
    --primary-rgba-50: rgba(204, 70, 66, 0.5);
    --primary-rgba-60: rgba(204, 70, 66, 0.6);
    --primary-rgba-70: rgba(204, 70, 66, 0.7);
    --primary-rgba-80: rgba(204, 70, 66, 0.8);
    --primary-rgba-90: rgba(204, 70, 66, 0.9);
    --secondary: #e36159;
    --secondary-100: #df4c43;
    --secondary-200: #dd4238;
    --secondary-300: #dc372d;
    --secondary--100: #e7766f;
    --secondary--200: #e9807a;
    --secondary--300: #ea8b85;
    --secondary-rgba-0: rgba(227, 97, 89, 0);
    --secondary-rgba-10: rgba(227, 97, 89, 0.1);
    --secondary-rgba-20: rgba(227, 97, 89, 0.2);
    --secondary-rgba-30: rgba(227, 97, 89, 0.3);
    --secondary-rgba-40: rgba(227, 97, 89, 0.4);
    --secondary-rgba-50: rgba(227, 97, 89, 0.5);
    --secondary-rgba-60: rgba(227, 97, 89, 0.6);
    --secondary-rgba-70: rgba(227, 97, 89, 0.7);
    --secondary-rgba-80: rgba(227, 97, 89, 0.8);
    --secondary-rgba-90: rgba(227, 97, 89, 0.9);
    --tertiary: #5b5b5b;
    --tertiary-100: #4e4e4e;
    --tertiary-200: #484848;
    --tertiary-300: #424242;
    --tertiary--100: #686868;
    --tertiary--200: #6e6e6e;
    --tertiary--300: #757575;
    --tertiary-rgba-0: rgba(91, 91, 91, 0);
    --tertiary-rgba-10: rgba(91, 91, 91, 0.1);
    --tertiary-rgba-20: rgba(91, 91, 91, 0.2);
    --tertiary-rgba-30: rgba(91, 91, 91, 0.3);
    --tertiary-rgba-40: rgba(91, 91, 91, 0.4);
    --tertiary-rgba-50: rgba(91, 91, 91, 0.5);
    --tertiary-rgba-60: rgba(91, 91, 91, 0.6);
    --tertiary-rgba-70: rgba(91, 91, 91, 0.7);
    --tertiary-rgba-80: rgba(91, 91, 91, 0.8);
    --tertiary-rgba-90: rgba(91, 91, 91, 0.9);
    --quaternary: #383f48;
    --quaternary-100: #2d323a;
    --quaternary-200: #272c32;
    --quaternary-300: #22262b;
    --quaternary--100: #434c56;
    --quaternary--200: #49525e;
    --quaternary--300: #4e5865;
    --quaternary-rgba-0: rgba(56, 63, 72, 0);
    --quaternary-rgba-10: rgba(56, 63, 72, 0.1);
    --quaternary-rgba-20: rgba(56, 63, 72, 0.2);
    --quaternary-rgba-30: rgba(56, 63, 72, 0.3);
    --quaternary-rgba-40: rgba(56, 63, 72, 0.4);
    --quaternary-rgba-50: rgba(56, 63, 72, 0.5);
    --quaternary-rgba-60: rgba(56, 63, 72, 0.6);
    --quaternary-rgba-70: rgba(56, 63, 72, 0.7);
    --quaternary-rgba-80: rgba(56, 63, 72, 0.8);
    --quaternary-rgba-90: rgba(56, 63, 72, 0.9);
    --dark: #212529;
    --dark-100: #16181b;
    --dark-200: #101214;
    --dark-300: #0a0c0d;
    --dark--100: #2c3237;
    --dark--200: #32383e;
    --dark--300: #383f45;
    --dark-rgba-0: rgba(33, 37, 41, 0);
    --dark-rgba-10: rgba(33, 37, 41, 0.1);
    --dark-rgba-20: rgba(33, 37, 41, 0.2);
    --dark-rgba-30: rgba(33, 37, 41, 0.3);
    --dark-rgba-40: rgba(33, 37, 41, 0.4);
    --dark-rgba-50: rgba(33, 37, 41, 0.5);
    --dark-rgba-60: rgba(33, 37, 41, 0.6);
    --dark-rgba-70: rgba(33, 37, 41, 0.7);
    --dark-rgba-80: rgba(33, 37, 41, 0.8);
    --dark-rgba-90: rgba(33, 37, 41, 0.9);
    --light: #fff;
    --light-100: #f2f2f2;
    --light-200: #ececec;
    --light-300: #e6e6e6;
    --light--100: #ffffff;
    --light--200: #ffffff;
    --light--300: #ffffff;
    --light-rgba-0: rgba(255, 255, 255, 0);
    --light-rgba-10: rgba(255, 255, 255, 0.1);
    --light-rgba-20: rgba(255, 255, 255, 0.2);
    --light-rgba-30: rgba(255, 255, 255, 0.3);
    --light-rgba-40: rgba(255, 255, 255, 0.4);
    --light-rgba-50: rgba(255, 255, 255, 0.5);
    --light-rgba-60: rgba(255, 255, 255, 0.6);
    --light-rgba-70: rgba(255, 255, 255, 0.7);
    --light-rgba-80: rgba(255, 255, 255, 0.8);
    --light-rgba-90: rgba(255, 255, 255, 0.9);
}
/* Skin Colors - Inverse */
:root {
    --primary-inverse: #fff;
    --secondary-inverse: #fff;
    --tertiary-inverse: #fff;
    --quaternary-inverse: #fff;
    --dark-inverse: #fff;
    --light-inverse: #777;
}
/* Grey Colors */
:root {
    --grey: #969696;
    --grey-100: #f4f4f4;
    --grey-200: #eaeaea;
    --grey-300: #e5e5e5;
    --grey-400: #e0e0e0;
    --grey-500: #dbdbdb;
    --grey-600: #cecece;
    --grey-700: #c1c1c1;
    --grey-800: #a8a8a8;
    --grey-900: #8e8e8e;
    --grey-1000: #757575;
}

.less-error-message ul,
.less-error-message li {
    list-style-type: none;
    margin-right: 15px;
    padding: 4px 0;
    margin: 0;
}

.less-error-message label {
    font-size: 12px;
    margin-right: 15px;
    padding: 4px 0;
    color: #cc7777;
}

.less-error-message pre {
    color: #dd6666;
    padding: 4px 0;
    margin: 0;
    display: inline-block;
}

.less-error-message pre.line {
    color: #ff0000;
}

.less-error-message h3 {
    font-size: 20px;
    font-weight: bold;
    padding: 15px 0 5px 0;
    margin: 0;
}

.less-error-message a {
    color: #10a;
}

.less-error-message .error {
    color: red;
    font-weight: bold;
    padding-bottom: 2px;
    border-bottom: 1px dashed red;
}
#footer {
    margin-top: 0px;
}

.bg-parallax {
    /* The image used */

    /* Set a specific height */
    min-height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (min-width: 1800px) {
    .container:not(.container-bs):not(.container-xl-custom):not(
            .container-xxl-custom
        ) {
        max-width: 1600px;
    }
}

@media (min-width: 1200px) {
    .container:not(.container-bs):not(.container-xl-custom):not(
            .container-xxl-custom
        ) {
        max-width: 1400px;
    }
}

.service-cards .card {
    min-height: 350px;
}

p,
.lead,
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 1px;
}

.bg-third{
    background: var(--dark--100);
}

.owl-carousel .owl-stage {
    transition-timing-function: linear !important;
}

/* Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

/* Slider container */
.slider {
  height: 160px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Gradient overlays (converted mixin) */
.slider::before,
.slider::after {

  content: "";
  height: 160px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .slider::before,
  .slider::after {
    background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 0%
  );
  }
}

/* Right gradient */
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

/* Left gradient */
.slider::before {
  left: 0;
  top: 0;
}

/* Sliding track */
.slider .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}

/* Individual slides */
.slider .slide {
 
  width: 400px;
  margin-right: 4em;
}

.bg-dsgvo{
    background: url('/img/bg.jpg') !important;
    background-size: contain;
}   


.slide-img{
    width: 100px;
}

.home-technologies-slider .slide-img {
    width: 72px;
}

@media (max-width: 767px) {
    .home-hero-section {
        min-height: 62vh !important;
        height: 62vh !important;
    }

    .home-hero-title {
        font-size: 2.1rem !important;
        line-height: 1.2 !important;
    }

    .home-hero-subtitle {
        font-size: 1rem !important;
    }

    .page-header.page-header-modern.page-header-background.page-header-background-md {
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
}


.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }}


.gradient-text {

/* 1. Gradient Definition */
background: linear-gradient(
  105deg, /* Adjusted angle to match the slight diagonal lean in the image */
  #42A5F5 0%,   /* Deep Blue */
  #64D3E3 22%,  /* Cyan/Light Blue */
  #9EE0BA 48%,  /* Mint Green */
  #F9D390 74%,  /* Soft Yellow/Gold */
  #FFAB91 100%  /* Coral Orange */
);

/* 2. Sizing & Animation Prep */
background-size: 100% auto; /* 200% is usually smoother for text than 300% */

/* 3. Text Clipping */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* Fallback */
  
  /* 3. Shadow & Animation */
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
 /* animation: shine 26s linear infinite; */
}

/* 4. The Keyframes: Move the background position */
@keyframes shine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

.gradient-text-no-animation {
  /* 1. Expand the background width to 200% or 300% */
  background: linear-gradient(
   45deg,
  #D9DCE6 0%,     /* Light grey */
  #e68dba 30%,    /* Soft pink */
  #e06fac 60%,    /* Pink */
  #d4649f 80%,    /* Stronger pink */
  #C9CEDA 100%    /* Light grey fade */
  );
  background-size: 300% auto;
  
  /* 2. Text Clipping */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* 3. Shadow & Animation */
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));

}

/* 4. The Keyframes: Move the background position */

.overlay.overlay-op-8:hover:before, .overlay.overlay-op-8.overlay-show:before, .overlay.overlay-op-8.show:before
 {
    opacity: var(--video-opacity);

}

.overlay.overlay-op-7:hover:before, .overlay.overlay-op-7.overlay-show:before, .overlay.overlay-op-7.show:before {
  opacity: var(--video-opacity);
}

   .dropdown-menu a:hover{
  background: #1f1f1f !important;
  box-shadow: #0a0c0d ;
  color: #fff;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--bs-body-color);
}

.dropdown-menu a:hover {
 transition: all 0.3s ease-in-out;
 scale: 0.99;
}

/* Gradient background based on your brand colors */
.bg-dsgvo {
    background: linear-gradient(90deg, #9b312b 0%, #1c1c1c 100%) !important;
}

/* Custom vertical divider */
.border-start-white-5 {
    border-left: 5px solid #ffffff !important;
}

/* Optional: Smooth text justification */
.text-justify {
    text-align: justify;
}

/* Ensure blockquote doesn't have default browser styling that breaks layout */
.custom-blockquote-style-1 {
    border: none;
    padding: 0;
}

.bg-dsgvo {
  position: relative;
  overflow: hidden; /* Prevents icons from spilling out */
  background: linear-gradient(90deg, #9b312b 0%, #1c1c1c 100%) !important;
  z-index: 1;
}

/* Common style for both background icons */
.bg-dsgvo::before,
.bg-dsgvo::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.1; /* This gives that subtle "watermark" look */
  z-index: -1;   /* Places them behind the text */
}

/* Left Icon (Cloud/Shield) */
.bg-dsgvo::before {
  background-image: url('/img/cloud.svg'); 
  width: 300px;
  height: 300px;
  left: -50px;
  bottom: -50px;
}

/* Right Icon (Shield) */
.bg-dsgvo::after {
  background-image: url('/img/shield.svg');
  width: 250px;
  height: 250px;
  right: -30px;
  bottom: -60px;
}

@media (max-width: 768px) {
  .bg-dsgvo::before, .bg-dsgvo::after {
      display: none;
  }
}

/* Brand Maroon Gradient for Icons */
.bg-maroon-gradient {
  background: linear-gradient(135deg, #8b2331 0%, #5a121a 100%);
}

/* Large Background Title Style */
.custom-why-us-title {
  font-size: 8rem; /* Adjust based on your layout */
  letter-spacing: 5px;
  background: linear-gradient(90deg, #6b1a25 0%, #9b312b 50%, #c32f38 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
  text-align: left;
}

/* Responsive adjustment for the big font */
@media (max-width: 1199px) {
  .custom-why-us-title {
      font-size: 5rem;
      letter-spacing: -2px;
  }
}

/* Light Background Helper */
.bg-light-5 {
  background-color: #fcfcfc !important;
}

/* Smooth text justify for descriptions */
.text-3-5 {
  font-size: 0.95rem;
  text-align: justify;
}

@media (max-width: 991.98px) {
  .text-3-5 {
    text-align: left;
  }
}

.post-image img {
  width: 100%;
  height: 220px;        /* set same height for all images */
  object-fit: cover;    /* crop instead of stretch */
}
.post {
  display: flex;
  flex-direction: column;
 /* height: 100%; */  
}

.post-content {
  flex: 1; /* makes content fill remaining space */
  display: flex;
  flex-direction: column;
}

.post-meta {
  margin-top: auto; /* pushes meta to bottom */
}
.post-content h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;   /* max 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;         /* ensures equal height */
}
.post-content p {
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.5em;
}

.life-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.life-gallery-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.life-gallery-track {
  display: flex;
  width: max-content;
  gap: 10px;
  animation: life-gallery-scroll 100s linear infinite;
}

.life-gallery-slide {
  flex: 0 0 auto;
  width: 320px;
}

.life-gallery-slide .life-image {
  height: 260px;
}

.life-gallery-slider:hover .life-gallery-track {
  animation-play-state: paused;
}

@keyframes life-gallery-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.whyus i{
  background-color: var(--primary);
  border-radius: 50%;
  padding: 7px;
  color: #fff;
}

.map-bg-image {
  background-image: url('/img/map.png');
  background-size: contain;
  background-position: center;
  background-repeat: repeat-x;
  padding-top: 5px;
}

.bg-white {
  background: #fff !important;
}