:root {
    --primary: #3b074d; /* Dark Purple */
    --secondary: #0b0110; /* Black */
    --light: #a18bd1; /* Lighter purple for accent */
    --dark: #280f2d; /* Very dark purple */
}
h1,
h2,
.font-weight-bold {
    font-weight: 700 !important;
    color: var(--light);
}

h3,
h4,
.font-weight-semi-bold {
    font-weight: 600 !important;
    color: var(--light);
}

body {
    background-color: var(--secondary);
    color: var(--light);
}

/* Make navbar background transparent */
.navbar {
    background-color: transparent !important;
    position: absolute; /* Fix to the top of the page */
    width: 100%;
    z-index: 10; /* Ensure navbar stays above other content */
    top: 0;
}

/* Navbar link text color (Home, About, etc.) changed to white */
.navbar-nav .nav-link {
    color: white !important; /* Force link text color to white */
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;
    padding: 15px 0;
    transition: .3s;
}

/* Hover and active state for navbar links */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--light) !important; /* Change to dark purple on hover */
}

/* "Contact Us" button: black background, white text */
.btn-secondary {
    background-color: black !important; /* Black background for button */
    color: white !important; /* White text for button */
    border-color: black !important;
}

/* Button hover effect: Invert colors */
.btn-secondary:hover {
    background-color: white !important; /* White background on hover */
    color: black !important; /* Black text on hover */
}

.nav-contact {
    background: var(--primary) !important; /* Dark purple background */
    color: var(--white) !important; /* White text */
    border-color: var(--primary);
}

/* Make CADS Extension logo customizable */
.navbar-brand h1 {
    font-size: 32px;
    color: var(--light); /* Default logo color */
}

.navbar-brand h1 span {
    color: var(--primary); /* Customizable secondary logo color */
}

/* Adjust button colors */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

/* Reduce gap between navbar and main content */
.carousel-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh; /* Ensures it takes up the full viewport height */
    padding-top: 0; /* Remove top padding */
}

/* Video background styling */
.carousel-item video {
    height: 100vh; /* Ensures video takes full height */
    object-fit: cover; /* Ensure the video covers the entire container */
}



/* Main Service Container Styling */
.service-container {
    perspective: 1000px; /* 3D perspective for flip effect */
    height: 450px; /* Increased height for illustration space */
    cursor: pointer;
}

/* Card Styling for Flip Effect */
.service-container .card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s; /* Smooth transition effect */
    transform-style: preserve-3d;
}

/* Trigger Flip on Hover */
.service-container:hover .card {
    transform: rotateY(180deg); /* Flip on hover */
}

/* Front and Back Face Styling */
.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    backface-visibility: hidden; /* Hides the back face */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.front {
    background: #ffffff;
    color: #333;
    padding-top: 30px; /* Additional padding for illustration */
}

.back {
    background: #ccbfd7;
    color: #fff;
    transform: rotateY(180deg); /* Back face rotated initially */
}

/* Responsive Text and Styling for Card Content */
.front h5, .back h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.front h3, .back p {
    font-size: 1rem;
    text-align: center;
    margin: 5px 0;
}

.front p, .back p {
    font-size: 0.9rem;
    text-align: center;
}


/* Style for SVG icons inside service items */
/* Style for SVG icons inside service items */
.svg-container {
    width: 80%; /* Adjust the width as needed */
    max-width: 200px; /* Prevents SVGs from growing too large */
    margin: auto; /* Centers the SVG in the container */
}

.svg-container svg {
    width: 100%;
    height: auto; /* Maintains aspect ratio */
}



/* Floating animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}


.bg-offer {
    background: linear-gradient(rgba(152, 51, 186, 0), rgba(78, 24, 94, 0)), url(../img/carousel-2.jpg) top right no-repeat;
    background-size: cover;
}

/* General container styling */
.container-fluid {
    background-color: #000000;
}

/* Review form and testimonial section */
.review-form,
.testimonials {
    background-color: #886a90;
    padding: 30px;
    border-radius: 40px;
}

/* Testimonial items */
.testimonial-container {
    position: relative;
    height: 402.5px; /* Adjust based on testimonial size */

}

.testimonial-item {
    padding: 15px;
    background-color: #d2b4ed;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    animation: showReviews 12s infinite; /* Total time is 12s (3s * 4 reviewers) */
}

.testimonial-item:nth-child(1) {
    animation-delay: 0s;
}

.testimonial-item:nth-child(2) {
    animation-delay: 3s;
}

.testimonial-item:nth-child(3) {
    animation-delay: 6s;
}

.testimonial-item:nth-child(4) {
    animation-delay: 9s;
}

/* Keyframes for sequential fading effect */
@keyframes showReviews {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    10% {
        opacity: 1;
        transform: translateY(0);
    }
    25% {
        opacity: 1;
        transform: translateY(0);
    }
    35% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 0;
    }
}

/* Testimonial text styling */
.testimonial-text {
    font-size: 1rem;
    color: #555;
}

.review-stars {
    margin-top: 10px;
}

.star {
    color: #FFD700;
    font-size: 1.2rem;
}

/* Adjust form field and button sizes */
.form-control {
    font-size: 1rem;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.btn-primary {
    background-color: #4a0f61;
    border: none;
    padding: 12px 20px;
    font-size: 1rem;
    border-radius: 5px;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #3d0b52;
}

/* Star rating system */
.star-rating {
    direction: rtl;
    font-size: 30px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    color: #ddd;
    font-size: 30px;
    cursor: pointer;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #FFD700;
}


@import url("https://fonts.googleapis.com/css?family=Raleway");

$lightMaroon: #fff;
$darkMaroon: #320919;
$yellow: #ffaf53;

.form-wrapper {
  position: fixed;
  bottom: 10px;
  left: 10px;
  right: 10px;
  margin: auto;
  text-align: center;
  width: 350px;
  font-size: 2rem;
  background-color: $darkMaroon;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  padding: 20px;
  z-index: 1000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.form-wrapper .title {
  font-size: 3rem;
  text-transform: uppercase;
  color: $yellow;
  margin-bottom: 20px;
}

.form-wrapper form {
  padding: 10px 20px;

  .profileImage {
    text-align: center;
    font-size: 8rem;
    color: $yellow;
  }

  .form-group {
    position: relative;

    .form-icon {
      position: absolute;
      height: 50px;
      width: 40px;
      text-align: center;
      line-height: 50px;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      color: $lightMaroon;
      background-color: $yellow;
      border-top-right-radius: 80px;
      border-bottom-right-radius: 80px;
    }
  }

  input {
    border-radius: 0;
    background-color: $lightMaroon;
    padding: 24px;
    box-shadow: none;
    border-color: $lightMaroon;
    padding-left: 45px;
    color: $yellow;

    &::placeholder {
      color: $yellow;
    }
  }

  button[type="submit"] {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 0;
    background-color: $yellow;
    color: $darkMaroon;
    text-transform: uppercase;
    font-weight: 600;
  }
}

.form-wrapper a {
  font-size: 3rem;
  display: block;
  color: $yellow;
  text-decoration: none;
  margin-top: 20px;
}

.form-wrapper a:hover {
  color: #fff;
  text-decoration: underline;
}





/*link*/
.info{
  position:fixed;
  bottom:10px;
  left: 10px;
  right: 10px;
  margin:auto;
  text-align:center;
  color:#212121;
  font-weight:600;
  width:250px;
  font-size:2rem;
  
}

.info a{
   font-size:5rem; 
    display:block;
    color:#212121;
}



@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Adjust the height of the float here */
    }
    100% {
        transform: translateY(0);
    }
}

.svg-container {
    width: 100%;               /* Scale SVG to 80% of its container */
    max-width: 400px;         /* Max width to prevent it from growing too large */
    float: left;              /* Align SVG to the left side */
    margin-left: 10px;       /* Space between SVG and text content */
    animation: float 3s ease-in-out infinite; /* 3s duration and infinite repetition */
}