/* 2. Navbar Styling to Overlay the Image */
@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Miniver&family=Poppins:wght@400;500;600;700;800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Miniver&family=Poppins:wght@400;500;600;700;800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Miniver&family=Poppins:wght@400;500;600;700;800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
            --pm-primary: #EBA81C; /* Custom primary color */
            --pm-dark: #105A9B;
            --pm-light-bg: #f8f9fa; /* Light grey background */
            --pm-white: #ffffff;
            --pm-text-muted: #6c757d;
        }

               
        /* General Section Styles */
        .section-padding {
            padding: 80px 0; /* More padding for sections */
        }

        .section-heading {
            color: var(--pm-dark);
            font-size: 3.2rem;
            font-weight: 900;
            margin-bottom: 15px;
        }

        .section-subheading {
            font-size: 1.25rem;
            color: var(--pm-text-muted);
            margin-bottom: 60px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        .heading{color:var(--pm-dark);}
        
        .heading-bg{background-color:var(--pm-dark)}

        .heading1-bg{background-color:var(--pm-primary)}
 
        .heading1{color:var(--pm-primary);}
 
       .display-4{font-size:4.5rem;
        font-weight:900;
        line-height:4.75rem;
        font-family: roboto;
    }

    /* navbar */
  .navbar {
      background-color: #000;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      padding: 0.8rem 1rem;
      z-index: 1000;
    }

    .navbar-brand img {
            /* Set fixed size for the logo */
            height:80px;
            width: auto;
     }
        
    /* Nav Links */
       .nav-link {
      color: var(--pm-primary) !important;
      font-weight: 500;
      margin-right: 1rem;
      position: relative;
      display: inline-block;
      transition: color 0.3s ease;
    }

    /* Underline animation */
     .nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px; /* Position below the text */
    left: 50%; /* Start in the middle */
    width: 0; /* Start with no width */
    height: 2px;
    background-color:var(--pm-primary);
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%); /* Center the line */
}

   .navbar .nav-link:hover::after {
      width: 100%;
    }

    /* Custom Hamburger Icon */
    .navbar-toggler {
      border: none;
      background: transparent;
      padding: 0;
      z-index: 1100;
    }

    .navbar-toggler:focus {
      box-shadow: none;
    }

    .hamburger {
      width: 28px;
      height: 20px;
      position: relative;
      cursor: pointer;
      transition: transform 0.3s ease-in-out;
    }

    .bar {
      height: 3px;
      width: 100%;
      background-color: #EBA81C;
      display: block;
      position: absolute;
      left: 0;
      transition: all 0.3s ease-in-out;
    }

    .bar:nth-child(1) { top: 0; }
    .bar:nth-child(2) { top: 8px; }
    .bar:nth-child(3) { top: 16px; }

    /* Animate to X */
    .hamburger.active .bar:nth-child(1) {
      transform: rotate(45deg);
      top: 8px;
    }

    .hamburger.active .bar:nth-child(2) {
      opacity: 0;
    }

    .hamburger.active .bar:nth-child(3) {
      transform: rotate(-45deg);
      top: 8px;
    }

    /* Slide Left Animation for Mobile Menu */
    @media (max-width: 991px) {
      .navbar-collapse {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: #000;
        display: flex;
        flex-direction: column;
        justify-content: center; /* ✅ Vertically Center */
        align-items: center; /* ✅ Horizontally Center */
        transition: left 0.4s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
      }

      .navbar-collapse.show {
        left: 0;
      }

      .nav-link {
        margin: 15px 0;
        font-size: 1.2rem;
        text-align: center;
        display: inline-block;
      }

      .nav-link::after {
        bottom: -3px;
      }
        .navbar-nav {
        text-align: center;
      }

    }
@media (max-width: 767px) {
  section {
    padding-left: 1rem;   /* about 16px */
    padding-right: 1rem;
  }
}

     
/* Hero Heading */
.section-heading {
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pm-primary);
  margin-bottom: 0.5rem;
}

/* Highlighted dynamic text (typewriter text) */
.text-highlight {
  color: var(--pm-primary);
}

/* Subheading / paragraph */
.subheading {
  font-size: clamp(1.5rem, 2.5vw, 1.3rem);
  color: var(--pm-dark);
  font-weight: 700;
  max-width: 600px;
}

/* Button styling */
.btn-pulse-fill { position: relative; 
    background-color: var(--pm-primary); 
    color: white; 
    padding: 10px 20px; 
    overflow: hidden; /* Hides the initial hidden layer */ 
    z-index: 1; /* Keeps the text on top */ 
    transition: color 0.4s;}
    
    .btn-pulse-fill::after { content: ''; 
    position: absolute; 
    top: 0; 
    left: 0;
     width: 0; /* Starts with zero width */ 
     height: 100%; /* Secondary/Hover color */ 
     background-color: var(--pm-dark); /* Crucial smooth transition */
      transition: width 0.4s ease-in-out; 
      z-index: -1; /* Place behind the text */}
      
      .btn-pulse-fill:hover { color: white; /* Text color stays white */}
      .btn-pulse-fill:hover::after { width: 100%; /* Expands to full width */ 
        left: 0;}

        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }}
.icon-pulse {  display: inline-block;  border-radius: 50%;  background: #007bff;  padding: 15px;  /* Apply the animation to loop forever */  animation: pulse 2s infinite; }

/* Cursor blinking effect (optional, matches typewriter animation) */
.cursor {
  color: #EBA81C;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Responsive alignment */
@media (max-width: 991px) {
  .hero-content {
    text-align: center;
  }

  .section-heading {
    font-size: clamp(1.6rem, 7vw, 3rem);
  }
}

/* 2. Apply the Animation */
.drift-text {
    font-size: 2rem;
    color: #4CAF50;
    
    /* Crucial: Must be block or inline-block for transform to work */
    display: inline-block; 
    
    /* Apply a very slow, smooth, infinite animation */
    animation: drift 6s infinite alternate ease-in-out;
}

/* 1. Define the Keyframes for Vertical Movement */
@keyframes drift {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); } /* Move up 5 pixels */
    100% { transform: translateY(0); }
}

    .text-auto-slide {  /* Start hidden and slightly down */  opacity: 0;  
      font-weight:bold;
         /* Apply animation */  animation: slideUpFadeIn 1s ease-out 0.5s forwards; }
@keyframes slideUpFadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); }}

/* 1. Button Styling and Auto-Animation Setup */
.btn-auto-bounce {
    background-color: var(--pm-dark);
    color: var(--pm-primary);
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-block; 
    position: relative; 
    
    /* --- CRITICAL CHANGE FOR AUTO-BOUNCE --- */
    animation: bounce 2s infinite ease-in-out; 
    /* - animation: bounce (the keyframe name)
       - 2s (duration of one cycle)
       - infinite (makes it loop forever)
       - ease-in-out (makes the movement smooth)
    */
}

.btn-auto-bounce:hover {color: var(--pm-light-bg);}
/* 2. Keyframes Definition (The same bounce sequence) */
@keyframes bounce {
    /* Peak of the upward jump */
    0%, 100% { /* Start and End position (at rest) */
        transform: translateY(0); 
    }
    /* Jump up */
    20% {
        transform: translateY(-8px); 
    }
    /* Fall down/rest */
    40% {
        transform: translateY(0); 
    }
    /* Small secondary jump */
    60% {
        transform: translateY(-4px);
    }
    /* Fall down/rest */
    80% {
        transform: translateY(0);
    }
}

/* Hero section background */
.header {
 position: relative;
      background: url('../images/hero-section-image.png') center/cover no-repeat;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: top ;
      align-items: left;
      text-align: left;
      overflow: hidden;
      min-height: 800px;
      padding-top:100px;


  overflow: hidden;
}

/* Overlay (default hidden) */
.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  transition: background 0.3s ease;
  z-index: 0;
}

/* Text above overlay */
.hero-content {
  position: relative;
  z-index: 1;
}

/* Overlay for mobile only */

/* Optional gradient overlay for nicer look */
@media (max-width: 991px) {
 .header{display: flex;
    
    align-items: center;
    justify-content: center;

  }
    .header::before {
    background: linear-gradient(
      180deg,
      rgba(9, 100, 174, 0.75) 0%,
      rgba(235, 168, 28, 0.75) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Responsive text sizes */





    /* why choose us */
        .section-bg {
            background-color: #f8f9fa; /* Light grey background */
            padding: 60px 0;
        }
        
        .feature-icon {
            font-size: 3rem;
            color: var(--pm-primary);
            margin-bottom: 1rem;
        }
        
        .pillar-card {
            background: #ffffff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            height: 100%; /* Important for equal height in the grid */
        }
        
        .pillar-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        .list-unstyled li i {
            color: var(--pm-primary);
            margin-right: 8px;
        }

        .advantage-block {
            border-left: 5px solid var(--pm-primary);
            padding-left: 15px;
            margin-bottom: 25px;
        }

        .cta-section {
            background-color: var(--pm-primary);
            color: #fff;
            padding: 40px;
            border-radius: 8px;
        }

        .cta-button {
            background-color: #ffffff;
            color: var(--pm-primary);
            border: 2px solid #ffffff;
            font-weight: bold;
            transition: background-color 0.3s, color 0.3s;
        }

        .cta-button:hover {
            background-color: transparent;
            color: #ffffff;
        }


    
        /* Service Card Styles */
        .section-bg {
            background-color: var(--pm-light-bg); /* Light grey background */
            padding: 60px 0;
        }
        .feature-icon {
            font-size: 3rem;
            color: var(--pm-primary);
            margin-bottom: 1rem;
        }
        .pillar-card {
            background: #ffffff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            height: 100%; /* Important for equal height in the grid */
        }
        .pillar-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        .list-unstyled li i {
            color: var(--pm-primary);
            margin-right: 8px;
        }
        .advantage-block {
            border-left: 5px solid var(--pm-primary);
            padding-left: 15px;
            margin-bottom: 25px;
        }
        .cta-section {
            background-color: var(--pm-primary);
            color: #fff;
            padding: 40px;
            border-radius: 8px;
        }
        .cta-button {
            background-color: #ffffff;
            color: var(--pm-primary);
            border: 2px solid #ffffff;
            font-weight: bold;
            transition: background-color 0.3s, color 0.3s;
        }
        .cta-button:hover {
            background-color: transparent;
            color: #ffffff;
        }

 /* --- SERVICES SECTION MODIFICATIONS --- */

/* 1. Remove Padding from the entire section wrapper */
.services-bg {
     position: relative;
    z-index: 1; 
    padding: 0; 
   /* Image and Overlay styles remain */
    background-image: url('../images/image2.png'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Retain the dark overlay and container z-index for the background image effect */
.services-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); 
    z-index: -1; 
}

/* Ensure the content inside the container has padding if needed */
.services-bg .container {
    padding-top: 80px;
    padding-bottom: 80px;
}
.button{background-color:var(--pm-dark) ;
color: var(--pm-primary)!important;
transition:left .2s ease
}
/* --- SERVICE CARD STYLING WITH SLIDE-LEFT HOVER --- */
.button:hover{background-color: var(--pm-primary);
color: var(--pm-dark)!important;}

.service-card {
    position: relative; 
    overflow: hidden; 
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.4s ease-in-out;
    height: 100%;
    padding: 30px;
    text-align: center;
}
.service-card .service-icon{color:var(--pm-primary)}
.service-card .card-title{color: var(--pm-dark);
}

.card-icon {
  color: var(--pm-dark); /* default color */
  transition: color 0.3s ease, transform 0.3s ease;
}

.service-card:hover .card-icon {
  color: var(--pm-dark); /* hover color */
  transform: scale(1.1); /* optional: subtle zoom */
}

.service-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Inner Content Wrapper: This must be separate to transition the color */
.card-content-wrapper {
    position: relative;
    z-index: 2; /* Keeps content above the sliding overlay */
    transition: color 0.4s; /* Transition for the text color change */
}


service-card .service-icon,
.service-card .card-title,
.service-card .card-text {
    position: relative; /* Essential for z-index to work correctly */
    z-index: 3; /* HIGHER Z-INDEX: Ensures these elements are on top of the overlay (z-index: 1) */
    transition: color 0.4s ease-in-out;
}

/* Overlay Pseudo-Element */
.service-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--pm-primary); 
    transform: translateX(-100%); 
    transition: transform 0.4s ease-out; 
    z-index: 1; /* LOWER Z-INDEX: Sits below the content but above the card background */
}

/* HOVER EFFECT: Slide the overlay into view */
.service-card:hover::after {
    transform: translateX(0); 
}

/* HOVER EFFECT: Change content colors for contrast against the overlay */
.service-card:hover .service-icon,
.service-card:hover .card-title,
.service-card:hover .card-text {
    color: var(--pm-white) !important;
}

/* Hide arrow for the last step */
.col-lg-3:last-child .step-arrow {
    display: none !important; /* Hide on larger screens too */
}


/* --- RESPONSIVENESS --- */
@media (max-width: 991.98px) { /* Adjust for smaller screens (md and below) */
    .modern-process-step {
        margin-bottom: 20px; /* Add space between stacked cards */
    }

    /* Hide arrows on smaller screens since cards stack vertically */
    .step-arrow {
        display: none !important;
    }
}

/* work process */

/* --- MODERN DIAGRAM WORK PROCESS STYLES --- */

.process-step-item {
    position: relative;
    z-index: 1; 
}

.diagram-step {
    text-align: center;
    padding: 20px 10px;
    height: 100%;
}

/* ---------------------------------------------------- */
/* CIRCLE OUTLINE & FILL ANIMATION */
/* ---------------------------------------------------- */

.step-icon-circle {
    width: 140px;
    height: 140px;
    line-height: 140px; 
    
    /* DEFAULT STATE: OUTLINE */
    background-color: transparent;
    border: 3px solid var(--pm-primary); /* The Outline */
    
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    
    /* SMOOTH ANIMATION TRANSITION */
    transition: all 0.4s ease-in-out; 
    cursor: pointer;
}

.step-icon {
    /* DEFAULT STATE: ICON COLOR */
    color: var(--pm-primary); 
    font-size: 2.5rem;
    /* SMOOTH ICON COLOR TRANSITION */
    transition: color 0.4s ease-in-out;
}

/* HOVER STATE: FILL ANIMATION */
.step-icon-circle:hover {
    background-color: var(--pm-primary); /* Circle fills with brand color */
    box-shadow: 0 6px 15px rgba(255, 87, 34, 0.5); /* Shadow for lift effect */
}

.step-icon-circle:hover .step-icon {
    color: var(--pm-white); /* Icon turns white for contrast */
}

/* ---------------------------------------------------- */
/* TEXT STYLES (Simple and clean) */
/* ---------------------------------------------------- */
.step-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--pm-dark);
    margin-bottom: 5px; 
}

.step-text {
    color: var(--pm-text-muted);
    font-size: 0.95rem;
}

/* ---------------------------------------------------- */
/* CURVED/DIAGONAL DOTTED CONNECTOR */
/* ---------------------------------------------------- */

/* Creates a slightly diagonal dotted line pointing to the next step */
.process-step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 55px; /* Y-position (aligns below the circle) */
    right: -80px; /* X-position (starts in the gap) */
    width: 100px; /* Length of the dotted line */
    height: 3px;
    border-top: 3px dotted #aaa;
    
    /* Diagonal/Curved Look: Skew and Rotate */
    transform: rotate(8deg); 
    transform-origin: left top;
    z-index: 0;
}

/* Optional: Small Arrowhead for the diagonal line */
.process-step-item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 58px;
    right: -85px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #aaa; 
    transform: rotate(8deg); 
    transform-origin: left top;
    z-index: 2; 
}


/* --- RESPONSIVENESS (Hiding Dotted Arrows on Mobile) --- */
@media (max-width: 767.98px) {
    /* Hiding the diagonal line and arrowhead entirely when stacking vertically */
    .process-step-item:not(:last-child)::after,
    .process-step-item:not(:last-child)::before {
        display: none;
    }

    .diagram-step {
        margin-bottom: 25px; 
    }
}

/* testimonials */
/* --- TESTIMONIALS SECTION STYLES --- */

.testimonials-bg {
    position: relative;
    z-index: 1;
    padding: 80px 0; /* Standard section padding */
    
    /* !--- IMPORTANT: Replace this URL with your actual background image ---! */
     
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
}

/* Dark Overlay for the Background Image */
.testimonials-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.8);  Darker overlay for better text contrast  */
    z-index: -1; 
}

/* Ensure content is above the overlay */
.testimonials-bg .container {
    position: relative;
    z-index: 2;
}

/* Client Benefits List */
.client-benefits-list {
    margin-top: 30px;
    padding: 0;
}

.client-benefits-list li {
    color: var(--pm-dark);
    font-size: 1.1rem;
    margin: 5px 15px; /* Spacing between bullet points */
}

.client-benefits-list li i {
    color: var(--pm-primary); /* Checkmark in brand color */
}

/* Testimonial Card Styling */
.testimonial-card {
    background-color: var(--pm-white);
    border-radius: 10px;
    padding: 40px;
    margin: 0 auto;
    max-width: 700px; /* Constrain card width */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.quotation-mark {
  /* Key styling for the large quote */
  font-size: 5em; /* This is 4 times the size of the parent font */
  font-family: Georgia, serif; /* Often looks better with a serif font */
  line-height: 1; /* Prevents extra space above/below the quote */
  margin-right: 5px; /* Adds a little space between the quote and the text */
  color: #ccc; /* A light color often used for decorative quotes */
  /* You can even position it above and to the left of the text: */
  float: left; 
  color: var(--pm-primary);
  height: 0; /* Helps the following text flow correctly */
}
.client-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 25px;
    border: 4px solid var(--pm-primary); /* Primary border on avatar */
}

.client-review {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--pm-dark);
    margin-bottom: 25px;
    font-style: italic;
}

.client-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pm-primary);
    margin-bottom: 5px;
}

.client-title {
    font-size: 0.95rem;
    color: var(--pm-text-muted);
}

/* Carousel Indicators & Controls */
.carousel-indicators [data-bs-target] {
    /* background-color: var(--pm-dark); White dots */
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 0 7px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    border:2px solid var(--pm-primary)
}

.carousel-indicators .active {
    opacity: 1;
    width: 12px;
    height: 12px;
    background-color: var(--pm-primary); /* Active dot in brand color */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none; /* Remove default Bootstrap arrows */
    font-size: 2rem;
    color: var(--pm-white);
    opacity: 0.8;
}

.carousel-control-prev, .carousel-control-next {
    width: 5%; /* Make controls thinner */
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    color: var(--pm-primary); /* Arrows highlight on hover */
    opacity: 1;
}

/* ready to move */
/* --- CTA SECTION STYLES (Ready to Get Moving) --- */

/* Ensure the image container controls the size */
.cta-quote{background-color: var(--pm-dark);}
.cta-image-container { 
background-size: cover;
    display: block;
    height: 100%;
    /* Ensure the content aligns well with the height of the text */
}

.cta-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.cta-content {
    padding-right: 20px; /* Optional: Give some space before the image on desktop */
}

.cta-btn {
    padding: 12px 30px;
    font-size: 1.2rem;
    font-weight: 700;
    /* Add subtle shadow and transition for interactive feel */
    box-shadow: 0 4px 10px rgba(var(--pm-primary-rgb), 0.3);
    transition: all 0.3s ease;
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(var(--pm-primary-rgb), 0.5);
}

/* ph icon and whatsapp icon */
/* Container for both icons */
.fixed-contact-icons {
    /* STICKY POSITIONING */
    position: fixed;        /* Makes the container stay in place when scrolling */
    top: 50%;               /* Starts the container halfway down the screen */
    right: 15px;            /* Positions it 15 pixels from the right edge */
    transform: translateY(-50%); /* Centers the container vertically */
    z-index: 1000;          /* Ensures it sits above all other page content */
    
    /* VERTICAL STACKING */
    display: flex;
    flex-direction: column; /* Stacks the icons vertically (one below the other) */
    gap: 15px;              /* Adds space between the icons */
}

/* Individual Icon Styling */
.contact-icon {
    /* Base style */
    color: white;           
    padding: 15px;
    border-radius: 50%;     /* Makes the button circular */
    font-size: 24px;        /* Icon size */
    text-decoration: none;  /* Remove link underline */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adds a shadow */
    
    /* Center the icon inside the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s; /* Smooth hover transition */
}

/* Phone-specific colors */
.phone-icon {
    background-color: #34B7F1; /* A standard blue color */
}

.phone-icon:hover {
    background-color: #2698c9;
}

/* WhatsApp-specific colors */
.whatsapp-icon {
    background-color: #25D366; /* Official WhatsApp green */
}

.whatsapp-icon:hover {
    background-color: #1aae4e;
}

/* scroll top */
#goToTopBtn {
    /* Fixed Positioning */
    position: fixed;
    bottom: 20px;          /* Distance from the bottom of the viewport */
    right: 30px;           /* Distance from the right of the viewport */
    z-index: 99;           /* Ensures it's above other elements */

    /* Appearance */
    border: none;
    outline: none;
    background-color: var(--pm-primary); /* Dark background */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;    /* Makes it circular */
    font-size: 18px;       /* Icon size */
    opacity: 1;            /* Initially hidden */
    transition: opacity 0.3s, background-color 0.3s; /* Smooth transitions */

    /* To hide/show the button with JavaScript */
    display: flex;
    align-items: center;
    justify-content: center;
}

#goToTopBtn:hover {
    background-color: #555; /* Slightly lighter on hover */
}

/* --- RESPONSIVENESS --- */
@media (max-width: 767.98px) {
    /* Stack columns vertically on mobile */
    .cta-content {
        order: 2; /* Put content below the image on mobile */
        padding-right: 0;
        text-align: center;
    }
    
    .cta-image-container {
        order: 1; /* Put image above the content on mobile */
        margin-bottom: 25px;
    }

    .cta-btn {
        width: 100%; /* Full width button on mobile */
    }
}

/* footer */
/* --- FOOTER SECTION STYLES --- */

/* Footer main container (dark background) */
.footer-section {
    background-color: #1a1a1a; /* Very dark grey/black */
    color: #f0f0f0; /* Light text */
    padding-top: 50px;
    font-size: 0.95rem;
}

.footer-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pm-white); /* White titles */
    margin-bottom: 20px;
    position: relative;
    /* padding-bottom: 5px; */
}

/* Underline effect for titles */
.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    background-color: var(--pm-primary);
    border-radius: 2px;
}


.footer-text, .footer-contact li {
    color: #b0b0b0; /* Light grey for body text */
}

/* Quick Links and Contact List Styling */
.footer-links, .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li, .footer-contact li {
    margin-bottom: 10px;
}

.footer-links a, .footer-contact a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover, .footer-contact a:hover {
    color: var(--pm-primary);
    padding-left: 5px; /* Subtle hover animation for links */
}

/* Social Icons */
.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #333;
    color: var(--pm-white);
    border-radius: 50%;
    margin-right: 8px;
    transition: background-color 0.3s ease;
}

.social-icon:hover {
    background-color: var(--pm-primary);
}

/* Newsletter Form Styling */
.newsletter-form .form-control {
    border-radius: 5px 0 0 5px;
    border: 1px solid #333;
    background-color: #333;
    color: var(--pm-white);
}

.newsletter-form .btn {
    border-radius: 0 5px 5px 0;
}

/* Copyright Bar */
.footer-bottom {
    background-color: #000; /* Black bar for stark contrast */
    padding: 15px 0;
    margin-top: 30px;
    border-top: 1px solid #333;
}

.footer-bottom p {
    color: #999;
    font-size: 0.85rem;
}

/* --- NEW LOGO STYLES --- */
.footer-logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 25px !important; /* Spacing below the logo */
}

.footer-logo-icon {
    font-size: 1.8rem;
    color: var(--pm-primary); /* Use brand color for the icon */
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pm-white); /* White text for the name */
    line-height: 1;
}
/* --- END NEW LOGO STYLES --- */





/* --- FOOTER SECTION STYLES --- */

/* Footer main container (dark background) */
.footer-section {
    background-color: #1a1a1a; /* Very dark grey/black */
    color: #f0f0f0; /* Light text */
    padding-top: 50px;
    font-size: 0.95rem;
}

/* --- NEW LOGO STYLES --- */
.footer-logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 25px !important; /* Spacing below the logo */
}

.footer-logo-icon {
    font-size: 1.8rem;
    color: var(--pm-primary); /* Use brand color for the icon */
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pm-white); /* White text for the name */
    line-height: 1;
}
/* --- END NEW LOGO STYLES --- */


.footer-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pm-white); /* White titles */
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 5px;
}

/* Underline effect for titles */
.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    background-color: var(--pm-primary);
    border-radius: 2px;
}
/* ... rest of the footer styles (footer-text, footer-links, social-icon, footer-bottom, etc.) remain the same ... */

/* ... rest of your CSS file ... */
/* RESPONSIVENESS: Ensure margins look good on smaller devices */
@media (max-width: 767.98px) {
    .footer-title {
        margin-top: 20px;
    }
}