/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect  base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
/* ================= GLOBAL WHITE BACKGROUND ================= */

html,
body {
    background: #ffffff;
    font-family: 'Inter';
    margin: 0;
    padding: 0;
    font-size:16px !important;
}

.site, .site-content, #page, #content {
    background: #ffffff;
}

section {
    padding: 3rem 0;   /* Mobile first */
}

@media (min-width: 576px) {
    section {
        padding: 4rem 0;
    }
}

@media (min-width: 992px) {
    section {
        padding: 7rem 0;
    }
}

/*only for those section that using separator*/
.with-separator {
    padding-bottom: 0rem;
}

.with-separator-next {
    padding-top: 5.25rem;
}
.separator-line {
    padding-top:4rem;
}


/** We are controlling the page structure using botstrap classes, hence removing the widths and padding from the elementor **/
.e-con {    
    max-width:100% !important;
    padding:0 !important;
}
 @media (min-width: 922px) {
    .ast-narrow-container .site-content > .ast-container {
        max-width: 1440px;
    }
}
.e-con>.e-con-inner { 
    max-width:100% !important;
    padding:0 !important;
}

@media (min-width: 1440px) {
   .container-fluid {
       max-width: 1440px;
   }
}

.section-inner {
    padding: 0 20px;
}

@media (min-width: 768px) {
    .section-inner {
        padding: 0 48px;
    }
}

@media (min-width: 1200px) {
    .section-inner {
        padding: 0 120px;
    }
}
/** structuring ends **/
/* ======================
   BASE (Mobile First)
   ====================== */

/* Shared font family for headings */
h1, h2, h3,
.elementor-widget-heading h1, h2, h3,
.elementor-widget-html h1, h2, h3,
.entry-content h1, h2, h3 {
    font-family: 'Inter';
    margin-top: 0;
    margin-bottom: 1rem;
}

/* H1 – Mobile */
h1,
.elementor-widget-heading h1,
.elementor-widget-html h1,
.entry-content h1 {
    color: white;
    font-size: 1.75rem; /* 28px */
    font-weight: 500;
    line-height: 1.2;
}

/* H2 – Mobile */
h2,
.elementor-widget-heading h2,
.elementor-widget-html h2,
.entry-content h2 {
    color: #333;
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: 1.2;
}

/* H3 – Mobile */
h3,
.elementor-widget-heading h3,
.elementor-widget-html h3,
.entry-content h3 {
    color: #333;
    font-size: 1.375rem; /* 22px */
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02rem;
}

h4,
.elementor-widget-heading h4,
.elementor-widget-html h4,
.entry-content h4 {
    color: #333;
    font-size: 1.25rem; /* 20px */
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02rem;
}
/* Paragraphs – Mobile */
p,
.elementor-text-editor p,
.entry-content p{
    font-size: 1rem; /* 16px */
    line-height: 1.6;
    margin-bottom: .925rem;
    color: #5C5C5C;
}


.text-muted {
    color: #5C5C5C !important;
    
}
/* Mobile */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 14px;
}

/* Desktop */
@media (min-width: 586px) {
  .btn {
    padding: 12px 24px;
    font-size: 16px;
  }
}

.btn-primary {
    background-color: #0773E0;
    border-color: #0773E0;
    color:#fff;
    
    
}

.btn-primary:hover{
    background-color: #0773E0;
    border-color: #0773E0;
    color:#fff;
}
.btn-primary:focus{
    background-color: #0773E0;
    border-color: #0773E0;
    color:#fff;
    
}
 .btn-secondary{border-radius: 4px;
border: 1.5px solid #DCDCDC;
background: #DCDCDC;
     
 }


/* ======================
   Tablet (≥768px) to 1024
   ====================== */
   
   @media (min-width: 768px) and (max-width: 1024px) {
 h1,
    .elementor-widget-heading h1,
    .elementor-widget-html h1,
    .entry-content h1 {
        font-size: 2.25rem; /* 36px */
    }
    
    
         h2,
    .elementor-widget-heading h2,
    .elementor-widget-html h2,
    .entry-content h2 {
        font-size: 2.125rem; /* 34px */
    }
    
    h3,
    .elementor-widget-heading h3,
    .elementor-widget-html h3,
    .entry-content h3 {
        font-size: 2rem; /* 32px */
    }
    
      h4,
    .elementor-widget-heading h4,
    .elementor-widget-html h4,
    .entry-content h4 {
        font-size: 1.5rem;
    }

    p,
    .elementor-text-editor p,
    .entry-content p {
        font-size: 1.125rem; /* 18px */
    }
    
}


/* ======================
   Desktop (≥1440px)
   ====================== */
 @media (min-width: 1025px){
    h1,
    .elementor-widget-heading h1,
    .elementor-widget-html h1,
    .entry-content h1 {
        font-size: 3rem; /* 48px */
    }

    h2,
    .elementor-widget-heading h2,
    .elementor-widget-html h2,
    .entry-content h2 {
        font-size: 2.4rem; /* 38x */
    }

    h3,
    .elementor-widget-heading h3,
    .elementor-widget-html h3,
    .entry-content h3 {
        font-size: 2.25rem; /* 32px */
        line-height:40px;
    }
    
     h4,
    .elementor-widget-heading h4,
    .elementor-widget-html h4,
    .entry-content h4 {
        font-size: 1.5rem; /* 24px */
    }

    p,
    .elementor-text-editor p,
    .entry-content p {
        font-size: 1.25rem; /* 20px */
    }

    button,
    .button,
    .elementor-button {
        font-size: 1.25rem;
        padding: 1rem 2rem;
    }
}


@media (min-width: 992px) {
.p-text-wrap{
    width: 75%;
    margin: 0 auto;
}
}

@media (min-width: 992px) {
.p-text-wrap-2{
    width: 60%;
    margin: 0 auto;
}
}

@media (min-width: 992px) {
.p-text-wrap-about{
    width: 82%;
    margin: 0 auto;
}
}

@media (min-width: 992px) {
.p-text-wrap-about{
    width: 77%;
    margin: 0 auto;
}
}

.sub-p{
    max-width:75%;
    margin:0;
}



.hero-inner {
    padding-left: 138px;
    padding-right: 138px;
}

.lg-border {
  border: none;
}

@media (min-width: 992px) {
  .lg-border {
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
  }
}

.lg-side {
  border: none;
}

@media (min-width: 992px) {
  .lg-side {
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
  }
}
.mb-minus-16 {
  margin-bottom: -16px;
}
.py-36 {
    padding-top: 36px;
    padding-bottom: 36px;
}

/*logo  style start here*/
/* Container hides the overflow */
.logo-marquee {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  background: transparent; /* or your color */
  position: relative;
}

/* The track that actually moves */
.logo-track {
  display: flex;
  width: max-content; /* Critical: allows the div to be as wide as all logos combined */
  animation: scrollLogos 40s linear infinite; /* Increase/Decrease time for speed */
}

/* Individual item spacing */
.logo-item {
  flex-shrink: 0;
  padding: 0 30px; /* This creates the gap between logos consistently */
}

.logo-img {
  height: 35px !important; /* Adjusted size */
  width: auto;
  object-fit: contain;
  opacity: 0.7;
  transition: all 0.3s ease;
  display: block;
}

.logo-img:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Pause animation on hover */
.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}

@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 
       We translate -50% because the track contains TWO identical sets.
       When the second set hits the start, it snaps back to 0 perfectly.
    */
    transform: translateX(-50%);
  }
}
/*logo style end here */


/* ===============================
   CARDS
================================ */
/* Standardize the icon container size */
.icon-wrap {
    width: 40px;  /* Adjust this size to your preference */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents the icon from getting squashed */
}

/* Ensure the image fits inside the container */
.icon-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


.card-body{
    padding:0px;
}

.card{
    border:none;
}

.card-text {
    font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 150%
}

@media (min-width: 1279px) and (max-width: 1281px) {
  .mt-1280-22 {
    margin-top: 35px;
  }
}

@media (min-width: 996px) and (max-width: 1440px) {
  .card-h4-height {
    min-height:58px;
  }
}



.img-width{
    max-width:70%;
    margin:0 auto;
    
}
.bg-border{
    border-radius: 12px;
    border: 1px solid #E2E2E2;
}
.bg-border-2{
border-radius: 12px;
border: 1px solid #E4E4E7;
}
    

.step-card{
display: flex;
padding:16px 12px;
align-items: flex-start;
gap: 24px;
align-self: stretch;
border-color: #FFF;
}


/* Desktop (≥768px) */
@media (min-width: 768px) {
  .step-card{
display: flex;
padding: 24px;
align-items: flex-start;
gap: 24px;
align-self: stretch;
border-color: #FFF;
}
}




.feature-card{
display: flex;
padding: 16px 12px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
border-radius: 12px;
border-color: #FFF;
}



/* Desktop (≥768px) */
@media (min-width: 768px) {
  .feature-card{
display: flex;
padding:  24px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
border-radius: 12px;
border-color: #FFF;
}
}

/* ===============================
   BUTTONS
================================ */



.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #0773E0;
    color: #ffffff;
    border-color: #0773E0;
}



/* ===============================
   UTILITIES
================================ */

.sky-blue {
    background-color: #EEF9FF;
    padding:24px;
    border-radius:12px;
    border: 1px solid #E2E2E2;
}

/* Desktop (≥768px) */
@media (min-width: 768px) {
  .sky-blue {
    background-color: #EEF9FF;
    padding:36px;
    border-radius:12px;
    border: 1px solid #E2E2E2;
}
}
@media (min-width: 992px) {
  .pe-80 {
    padding-right: 80px;
  }
}
.icon-wrap{
    width:40px;
}

.alternate-bg {
    background-color: #F5F6F8;
}




/* faq */
/* 1. STOP ALL ANIMATIONS */
.accordion-collapse.collapsing {
    transition: none;
}

.accordion-button::after {
    transition: none;
}

.accordion-button {
    transition: none;
}

/* 2. REMOVE BACKGROUND COLORS & TEXT STYLES (For Active, Hover, and Focus) */
.accordion-button:not(.collapsed),
.accordion-button:hover,
.accordion-button:focus,
.accordion-button:active {
    background-color: transparent;
    /* Removes blue/gray backgrounds */
    color: inherit;
    /* Keeps text black */
    box-shadow: none;
    /* Removes blue focus ring and shadows */
}

/* 3. OPTIONAL: KEEP ARROW BLACK (Prevent it from turning blue when open) */
.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-icon);
    /* Forces default black arrow */
}

.accordion-button {
    padding: 0.75rem 1.25rem;
    /* even tighter if needed */
}
/* FAQ Question (Button Text) */
.accordion-button {
    font-size: 1.25rem;
  
}
.accordion-button::after {
    transition: none;
    padding-left: 20px !important;
}
.accordion-button span {
    padding-right:25px;
}

/* FAQ Answer (Body Text) */

.accordion-body {
    padding-top:0px;
    font-size: 1rem;
    margin-right:35px;
    
}

/* Testimonials Section Styles */


/* --- LEFT SIDE: RATINGS --- */


.rating-block .rating-text {
    font-size: 1.5rem;
    font-weight: 600;
    
}
.fs-36 {
  font-size: 36px;
}
.fs-14 {
  font-size: 14px !important;
}

 .stars {
    font-size: 1.25rem;
    color: #E8B308;
}

.rating-block .review-count {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

/* Dots Styling */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* --- RIGHT SIDE: SLIDER CONTAINER --- */
.testimonial-slider {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on mobile */
    
    /* Hiding the Scrollbar */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    padding-bottom: 10px; /* Space for box-shadows */
}

.testimonial-slider::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* --- CARD STYLING (Mobile First Approach) --- */
.testimonial-card {
    /* MOBILE: Set default width for smaller screens */
    flex: 0 0 300px;
    min-width: 300px;
    
    /* Design Aesthetics */
    border: none;
    border-radius: 12px;
    background-color: #F2F1EE !important;
    transition: transform 0.3s ease;
}

/* DESKTOP: Increase width on large screens (lg breakpoint) */
@media (min-width: 992px) {
    .testimonial-card {
        flex: 0 0 600px;
    }
}

/* Card Text Styling */
.testimonial-card .card-text {
    font-size: 0.95rem;
    color:#333;
    line-height: 1.6;
    
    /* Optional: Limit text to 8 lines to keep cards neat */
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* User Avatar & Info */
.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #6c757d;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents avatar from squishing */
}

.user-name {
    font-weight: 700;
    font-size: 1rem;
    color: #212529;
}

.user-role {
    font-size: 0.8125rem;
    color: #6c757d;
}

/* Navigation Arrows */
.arrow-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding: 0;
    transition: all 0.2s ease;
}

.arrow-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}



/* ===============================
   FOOTER – ALMO STYLE (Corrected)
================================ */
.above-footer-sec{
    display: flex;
width: 200px;
padding: 19px 20px;
justify-content: center;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

.site-footer {
    background-color: #000;
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-top: 1px solid #222;
    width: 100%;
    display: block;
    /* Ensures it sits on its own line */
    position: relative;
    z-index: 10;
}

/* ---------- ICONS & LINKS ---------- */
.site-footer .d-flex.gap-3 a {
    transition: all 0.3s ease;
    border-color: #333;
}


.site-footer .d-flex.gap-3 a i {
    font-size: 18px;
}

.site-footer ul li a {
    color: #ccc;
    font-size: 15px;
    font-weight: 300;
    transition: color 0.2s ease;
}

.site-footer ul li a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---------- FORMS ---------- */
.site-footer input.form-control {
    background-color: #000;
    border: 1px solid #333;
    color: #fff !important;
    opacity: 1;
    box-shadow: none;
}

.site-footer input.form-control:focus {
    border-color: #666;
}

.site-footer .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    font-weight: 500;
}

.site-footer .btn-primary:hover {
    background-color: #0b5ed7;
}

 
#forminator-module-1351 {
    display: flex;
    align-items: center;
    gap: 10px ;
}
#forminator-module-1351 input.forminator-input {
    background:black;
    display: flex;
    padding: 24px;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    outline: none ;       /* removes the blue outline on click */
    box-shadow: none;    /* removes any shadow effect */
    transition: none; 
    color:white!important;
}
#forminator-module-1351 button.forminator-button-submit{
    display: flex;
    padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  background:  #0773E0;
  font-size:16px;
}
#forminator-module-1351 {
    flex-wrap: wrap; /* allow items to go to next line */
}

#forminator-module-1351 .forminator-response-message {
    width: 100%;
    margin-top: 8px;
    order: 3; /* ensures it's always last */
}

/*site footer end*/



 
 /* Target by combining Tag, ID, and Class for maximum specificity */

/*contact form*/
/* aboutus */
.fs-18 {
  font-size:18px !important;
}
.about-us-section{
    padding-top:7rem;
    padding-bottom:0rem;
    
}
.sep-line-about{
    padding-top:80px;
}
/* 1. The Wrapper */
.almo-hero-wrapper {
    width: 100%;
    overflow: visible;
    /* Important: allows the image to poke out */
}

/* 2. The Top Grey Section */
.hero-top-bg {
   background: linear-gradient(180deg, rgba(199, 224, 250, 0.40) 40.93%, rgba(199, 224, 250, 0.04) 98.44%);
    /* The Figma Light Beige color */
    padding-top: 80px;

    /* CRITICAL: This padding creates space for the image overlap. 
       If your image overlaps by 150px, add that here + extra for spacing. */
    padding-bottom: 200px;
    
    

    text-align: center;
    color: #333;
}

.paged .hero-top-bg {
    padding-bottom: 40px; /* Reduces the space at the bottom of the grey area */
    margin-bottom: 0;
}

.paged .with-separator {
    margin-top: 0 !important;
    padding-top: 20px; /* Brings the Grid cards closer to the grey hero */
}

/* If the almo-hero-wrapper has a fixed height, reset it for paged view */
.paged .almo-hero-wrapper {
    height: auto !important;
    min-height: 0 !important;
}
/* Typography Styling based on Figma */



/* Button Styling (Blue) */
.btn-primary-almo {
    background-color: #0078D4;
    /* Almo Blue */
    color: #fff;
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 20px;
}

/* 3. The Image Card - */
.image-card {
    background: #fff;
    border-radius: 8px;
    border:1px solid #E2E2E2;
    /* Rounded corners like Figma */
    padding-top:32px;
    padding-bottom:32px;
    padding-left:24px;
    padding-right:24px;
    /* White border effect inside the card */
    
    /* Soft shadow */

    /* Position Logic */
    position: relative;
    /* Keeps it in the flow */
    z-index: 10;

    /* Negative Margin: This pulls the image UP into the grey section */
    margin-top: -150px;

    /* Ensure image fits */
    text-align: center;
}

.image-card img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}


/* --- 1. Fix the Top Gap on Blog Page --- */
.site-main.almo-blog-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* --- 2. The "Breakout" Hack (Forces Full Width Background) --- */
.almo-hero-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* --- 4. Essential Card Layout Styles --- */
.hero-image-container {
    width: 100%;
    position: relative;
    z-index: 10;
    margin-top: -180px; 
    
    
/* Pulls the card up */
}

/* Ensures the dynamic image fills the left side perfectly */
.hero-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* blog and about us style end here */



.blog-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 12px;
    border: 1px solid  #E2E2E2;
    display: flex;
    flex-direction: column;
}

/* Limit text to 2 lines and add ellipsis */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    /* THE FIX: Force the height to match the lines */
    line-height: 1.4 !important;    /* This sets the height of 1 line */
    max-height: 2.8em !important;   /* This is exactly 2 lines (1.4 * 2) */
}

/* Hover Effect: Lift & Shadow */
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

/* Image Wrapper (Aspect Ratio) */
.card-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f3f4f6;
}

/* Typography Mobile */
.blog-card h3 {
    line-height: 1.4;
    font-size: 1.1rem;
    /* Readable on mobile */
}

/* Arrow Animation */
.arrow-icon svg {
    transition: transform 0.3s ease;
}


.blog-card:hover .arrow-icon svg {
    transform: translate(2px, -2px);
}

.pagination-clean {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-family: sans-serif;
}

.pagination-clean .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* Active page (blue box) */
.pagination-clean .page-numbers.current {
    background: #1a73e8;
    color: #fff;
    font-weight: 500;
}
.ast-grid-common-col {
    position: relative;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
}

/* Hover effect */
.pagination-clean a.page-numbers:hover {
    background: #f1f3f5;
}
.bg-light{
   background:#EEF9FF;
   display: flex;
padding: 6px 12px;
justify-content: center;
align-items: center;
color:#333;
gap: 10px;
}
.text-primary{
    color: #0773E0 !important;

font-size:  16px;


}
/* Arrows */
.pagination-clean .prev,
.pagination-clean .next {
    width: 36px;
    height: 36px;
}

/* Disabled */
.pagination-clean .disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Dots (...) */
.pagination-clean .dots {
    pointer-events: none;
}

/* --- Tablet & Desktop Overrides (Min-Width) --- */

@media (min-width: 768px) {
    .blog-card {
        padding: 1.5rem;
        /* More padding on tablet */
    }

    .blog-card h3 {
        font-size: 1.25rem;
        /* Larger title on tablet */
    }
}

@media (min-width: 992px) {
    .blog-card {
        padding: 2rem;
        /* Maximum padding on desktop */
    }
}
 .main-section{
    padding: 0;
 }
@media (min-width: 1201px) {
    .ast-separate-container .ast-article-post,
    .ast-separate-container .ast-article-single,
    .ast-separate-container .ast-author-box,
    .ast-separate-container .ast-404-layout-1,
    .ast-separate-container .no-results {
        padding: 0px; /* change 20px to whatever you need */
    }
}

@media (min-width: 922px) {
    .ast-container {
    max-width:1440px;
    }
}
/* --- Only Custom Styles Needed --- */
.copy-link-btn{
    transition: all 0.3s ease;
    border-color: #dee2e6; /* Bootstrap gray-300 */
    color: #6c757d; /* Bootstrap text-muted */
}
.copy-link-btn:hover{
    background-color: #000;
    border-color: #000;
    color: #fff;
    transform: translateY(-2px);
}
/*single*/
.share-btn {
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
    border-color: #dee2e6; /* Bootstrap gray-300 */
    color: #6c757d; /* Bootstrap text-muted */
}

.share-btn:hover {
    background-color: #000;
    border-color: #000;
    color: #fff;
    transform: translateY(-2px);
}

/* Remove default bullets completely */
#desktop-toc-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* List item */
#desktop-toc-list li {
    position: relative;
}

/* Link style */
#desktop-toc-list li a {
    display: block;
    padding: 6px 0 6px 18px; /* space for active bullet */
    text-decoration: none;
    color: #6c757d;
    font-size: 0.95rem;
    transition: 0.2s ease;
}

/* Hide bullet by default */
#desktop-toc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
    opacity: 0;
    transition: 0.2s ease;
}

/* Show bullet ONLY on active item */
#desktop-toc-list li.active::before {
    opacity: 1;
}

/* Active text style */
#desktop-toc-list li.active a {
    color: #000;
    font-weight: 600;
}

/* =========================
   FIX 1: REMOVE BLUE HIGHLIGHT 
   ========================= */
.almo-article, 
.almo-article * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* =========================
   FIX 2: MOBILE TOC DRAWER (External Ready)
   ========================= */

/* Button Container */
.fab-sidebar-top {
  position: relative;
  z-index: 1002;
  margin-top: 24px;
  margin-bottom: 18px;
  width: 100%;
}

/* The Drawer Container - MUST have visibility hidden/visible for external files */
.mobile-sidebar-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 0; /* Initial state */
  z-index: 99999; /* Extremely high to ensure it's above everything */
  overflow: hidden;
  visibility: hidden; 
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

/* Open state for the Drawer */
.mobile-sidebar-drawer.open {
  width: 100vw;
  visibility: visible;
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 1099;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.mobile-sidebar-drawer.open .drawer-overlay {
  opacity: 1;
  visibility: visible;
}

.drawer-content {
  background: #ffffff;
  height: 100vh;
  width: 100%;
  max-width: 100vw;
  position: relative;
  padding: 20px;
  overflow-y: auto;
  z-index: 1101;
  display: block; /* Ensure it's not hidden by theme defaults */
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 2.5rem;
  line-height: 1;
  color: #121212;
  cursor: pointer;
  z-index: 1102;
}

/* TOC List Styles */
#mobile-toc-list {
    list-style: none !important;
    padding-left: 20px !important;
    margin: 0 !important;
}

#mobile-toc-list li {
    position: relative;
    margin-bottom: 20px !important;
}

#mobile-toc-list li a {
    display: block !important;
    color: #333333 !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 0 !important; 
}

#mobile-toc-list li.active a {
    color: #000000 !important;
    font-weight: 700 !important;
}

#mobile-toc-list li::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: #000000;
    border-radius: 50%;
    opacity: 0;
    transition: 0.2s ease;
}

#mobile-toc-list li.active::before {
    opacity: 1;
}


.almo-card{
border-radius: 12px;
border: 1px solid #BBB;
background: white;

}

/* 3. Blog Content Typography Adjustments */
.blog-content h2 {
    font-weight: 600;
    font-size: clamp(1.25rem, 2vw, 1.5rem); 
    margin-top: clamp(2rem, 3vw, 2.5rem);
    margin-bottom: 1rem;
}
.blog-ol {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 16px;
  padding-left: 0.5em;
  color: #5C5C5C;
}

.blog-ol li {
  margin-bottom: 6px;
}
.ast-container, .ast-container-fluid{
    padding-left:0px;
    padding-right:0px;
}

@media (max-width: 544px) {
    .ast-separate-container #content .ast-container {
         padding-left: 0px;
         padding-right: 0px; 
    }
}

.blog-content h3 {
    font-weight: 600;
    font-size: clamp(1.1rem, 1.8vw, 1.25rem);
    margin-top: clamp(1rem, 3vw, 2rem);
    margin-bottom: 1rem;
}

.blog-content p {
    font-weight: 400;
    font-size: clamp(0.95rem, 1.5vw, 1rem);
    line-height: 1.7;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}
.ast-single-post .entry-content a{
    text-decoration: none;
}
.get-almo{
    padding-top:12px;
    padding-bottom:12px;
    padding-left:32px;
    padding-right:32px;
}
.list-heading{
    color:#333;
}
.p-32 {
  padding: 32px;
}

.breadcrumb-item{
    color:  #0773E0;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 24px */
}

/* 4. Card Hover Effect */
.blog-card {
    transition: transform 0.2s ease-in-out;
}
.blog-card:hover {
    transform: translateY(-5px);
}

/* article shor code style*/
/* 1. THE MAIN CARD (White with Border) */
.almo-article {
             /* White Background */
    border: 1px solid #EAEAEA; /* Light Gray Border around everything */
    border-radius: 12px;     /* Card Rounded Corners */
    
}

/* Hover Effect */
.almo-article:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.08);
}

/* 2. THE IMAGE WRAPPER (Mint Green Background) */
.almo-article-img-wrapper {
    background-color: #F3F9F4; /* Mint Green Background */
    border-radius: 8px;        /* Rounded corners for the image container */
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 10;     /* Keeps image shape consistent */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The Image Styling */
.almo-article-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Change to 'contain' if using illustrations like Figma */
}

/* 3. TYPOGRAPHY */

/* Date and Time */
.almo-article .meta-date, 
.almo-article .meta-time {
    font-size: 0.85rem;
    color: #6B7280; /* Cool Gray */
    font-weight: 500;
}

/* Title */
.almo-article .card-title a {
     /* Dark text */
     color:#333;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.4;
    transition: color 0.2s;
}

.almo-article .card-title a:hover {
    color: #000000;
}



/* 4. ARROW ICON */
.almo-article .arrow-icon {
    min-width: 24px;
    transition: transform 0.2s ease;
}

/* Arrow Animation on Hover */
.almo-article:hover .arrow-icon {
    transform: translate(3px, -3px); /* Moves up-right slightly */
}
/*end here*/


.contact-bg {
  background-image: url('/wp-content/uploads/2026/02/contact_bg.png');
  background-size: cover;
  background-position: center;
  
  /* Lowered for mobile, will adjust for desktop below */
  min-height: auto; 
  
  display: flex;
  width: 100%; 

  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  /* Added some base padding for the background edges on mobile */
  padding: 20px 10px; 
}

.contact-card {
  border-radius: 4px;
  border: 1px solid #FFF;
  /* Removed fixed padding: 44px; (Handled by Bootstrap p-4 p-lg-5 in HTML) */
  /* Added a max-width so the card doesn't stretch too far on wide screens */
  max-width: 500px; 
}
.forminator-ui#forminator-module-1329.forminator-design--default .forminator-consent .forminator-checkbox-box {
    border-color: #777771;
    background-color: #ffffff !important;
    color: #097BAA;
}

.forminator-ui#forminator-module-1329.forminator-design--default .forminator-label {
    font-size: 14px !important;
    font-family: inherit;
    font-weight: 500 !important;
}

/* Media Query for larger screens (Desktop/Tablets) */
@media (min-width: 992px) {
  .contact-bg {
    padding: 19px;
  }
}.contact-bg {
  background-image: url('/wp-content/uploads/2026/02/contact_bg.png');
  background-size: cover;
  background-position: center;

  display: flex;
  
  /* --- CHANGED THESE TWO LINES --- */
 
  /* ------------------------------- */

 
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contact-card{
    padding:25px;
    border-radius:4px;
    border-radius: 4px;
    border: 1px solid  #FFF;;
}
@media (min-width: 992px) {
    .section-contact {
        padding: 80px;
    }
}
.blog-card:hover .card-title {
    color: #000 !important;  /* or your default title color */
}

.get-almo-mb{
    margin-bottom:153px;
}
.get-almo-page{
    padding-top:50px;
    padding-bottom:0px;
    padding-left:80px;
    padding-right:80px;
}

.get-almo-left-img{
    height:355px !important;
    width:1440px;
    margin-bottom:30px;
    
}

.grade-bg-color{
    background: linear-gradient(180deg, rgba(199, 224, 250, 0.40) 40.93%, rgba(199, 224, 250, 0.04) 98.44%);
}

.ast-plain-container.ast-no-sidebar #primary {
         margin-top: 0px; 
         margin-bottom: 0px;
    }
    
    
/* =========================
   PRICING & PLAN STYLES
========================= */



/* Pricing Builder Components */
.price-add-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed !important;
            pointer-events: auto !important; /* MUST BE AUTO for tooltip to show */
            background-color: #f8f9fa;
            border-color: #dee2e6;
            color: #6c757d;
        }
.price-add-btn {
    border: 2px solid transparent;
    border-radius: 8px;
    border-image: repeating-linear-gradient(
        60deg,
        #ced4da 0px,
        #ced4da 8px,   /* dash length */
        transparent 8px,
        transparent 14px /* gap */
    ) 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.price-add-btn:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.license-item-card {
    border: 1px solid #edf0f5;
    border-radius: 10px;
    margin-bottom: 20px;
}

.item-label-header {
    
    padding: 12px 15px;
    
}
.item-label-header-p{
    color: #333 !important;
    font-weight:500 important;
}

.border-billing{
    border-top: 1px solid #E4E4E7 ;
}
.item-body { padding: 15px; }

.summary-box { background-color: #f3f4f6; }



/* Billing Toggle */
.billing-toggle .btn {
    font-size: 0.85rem;
    color: #495057;
    border-color: #dee2e6;
    padding: 10px;
    background: #fff;
}
.billing-toggle .btn-check:checked + .btn {
    background-color: #0078d4 !important;
    color: #fff !important;
    border-color: #0078d4 !important;
}

.save-badge {
    font-size: 0.813rem;
    color: #0773e0;
     min-height: 18px
}

.remove-icon {
    cursor: pointer;
    color:  #5C5C5C;
    transition: color 0.2s;
}
.remove-icon:hover { color: #dc3545; }

/* Default = Mobile */
.bg-border-price {
  border: none;
  background: none;
}

/* Desktop (≥768px) */
@media (min-width: 768px) {
  .bg-border-price {
    border-radius: 12px;
    border: 1px solid #E2E2E2;
  }
}

/* Enterprise Section */
.enterprise-card { background-color: #0b2138; }



/* =========================
   CART / CHECKOUT STYLES
========================= */
 .price-navbar-cart-link {
            position: relative;
            display: inline-block;
            margin-left: 15px;
            text-decoration: none;
        }
        .price-navbar-cart-link i {
            font-size: 22px;
            color: #ffffff;
            transition: opacity 0.2s;
        }
        .price-navbar-cart-link:hover i {
            opacity: 0.8;
        }
        .circle{
            height:16px;
            width:16px;
            display:flex;
           align-items:center;
          
            
            
           
        }
        #price-navbar-badge {
           
            position: absolute;
            top: -8px;
            right: -10px;
            background: #ff3b3b;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 4px;
             border-radius:50px;
            line-height: 1;
        }
        
        
        .cart-empty-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertical center */
    align-items: center;       /* horizontal center */
    text-align: center;
             
}

.empty-cart-img {
    max-width: 100px !important;
    margin-bottom: 20px;
}
 #checkout-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }


/* Cart Container */
.price-checkout-wrap { width: 100%; }

.cart-card {
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
}

.cart-title {
    font-size: 32px;
    letter-spacing: -0.5px;
}



/* Product Icon */
.product-icon {
    width: 64px;
    height: 64px;
    background: #0f355b; /* Final override kept */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: 800;
    font-size: 11px;
    flex-shrink: 0;
}

/* Quantity Box */
.qty-box {
    background: #f1f3f6;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}
.qty-btn {
    border: none;
    background: transparent;
    padding: 5px 15px;
    font-size: 20px;
    color: #333;
    transition: 0.2s;
    cursor: pointer;
}
.qty-btn:hover { background: #e2e5e9; }

.qty-val {
    font-weight: 600;
    min-width: 45px;
    text-align: center;
    font-size: 16px;
}

/* Pricing */
.price-current {
    color: #0076bd;
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
}
.price-old {
    color: #000;
    text-decoration: line-through;
    font-weight: 800;
    font-size: 24px;
    display: block;
    margin-top: 5px;
}

/* Summary Section */
.summary-label {
    font-size: 22px;
    font-weight: 600;
    color: #444;
    min-width: 200px;
}
.summary-value {
    font-size: 22px;
    font-weight: 600;
    color: #444;
    min-width: 120px;
    text-align: right;
}
.grand-total-val {
    color: #0076bd !important;
    font-size: 28px !important;
    font-weight: 800 !important;
}

/* Actions */
.trash-btn {
    color: #ff5e6d;
    border: none;
    background: none;
    cursor: pointer;
    transition: 0.2s;
}
.trash-btn:hover {
    color: #e54d5c;
    transform: scale(1.1);
}

/* Description */
.item-desc {
    color: #666;
    line-height: 1.5;
    max-width: 380px;
    margin-bottom: 0;
}

.price-col { min-width: 140px; }


/* =========================
   UTILITY / EXTRA
========================= */

.text-white-50 {
    color: #CFCFCF !important;
    line-height: 24px;
    text-transform: capitalize;
}

.form-check { padding-left: 0; }


/* =========================
   NAVBAR CART ICON
========================= */

/* Container */
.almo-custom-cart-container {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px;
}

/* Icon Link */
.almo-cart-anchor {
    color: #000000;
    position: relative;
    display: flex;
    text-decoration: none !important;
    transition: opacity 0.2s;
}
.almo-cart-anchor:hover { opacity: 0.8; }

/* Badge */
.almo-cart-badge-circle {
    position: absolute;
    top: -6px;
    left: 4px;
    background-color: #0076bd !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: none; /* Controlled via JS */
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
}

    /* Left Item Card */
    .cart-item-ui {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 16px;
        position: relative;
        display: flex;
        gap: 20px;
        align-items: flex-start; 
    }
    .item-logo-ui {
        width: 50px; height: 50px; background: #003366; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        color: white; font-weight: bold; font-size: 10px; flex-shrink: 0;
    }
    .item-content-ui { flex-grow: 1; 
        min-width:0;
    }
    .item-title-ui { font-weight: 600; font-size: 18px; margin-bottom: 8px; color: #1a202c;  padding-right: 10px}
    .item-desc-ui { color: #718096; font-size: 14px; line-height: 1.5; margin-bottom: 20px; max-width: 80%; }
    .item-price-ui { position: absolute; top: 24px; right: 24px; font-weight: 600; font-size: 20px; white-space: nowrap; }

    /* Qty & Remove Actions */
    .item-actions-ui { display: flex; justify-content: space-between; align-items: center; }
    .qty-selector-ui { display: flex; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
    .qty-btn-ui:hover,
    .qty-btn-ui:focus,
    .qty-btn-ui { 
        padding:10px;
        height:48px;
        width:48px;
        background:#fff;
        color:#333;
    }
    
    .qty-input-ui { width: 45px; border: none; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; text-align: center; font-weight: 600; }
    .remove-btn-ui { color: #f56565; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 5px; font-weight: 500; text-decoration: none; }

    /* Right Summary Card */
    .summary-card-ui { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; position: sticky; top: 20px; }
    .summary-title-ui { font-weight: 600; font-size: 18px; margin-bottom: 20px; }
    
    .promo-wrap-ui { display: flex; gap: 10px; margin-bottom: 24px; }
    .promo-input-ui { flex: 1; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px; font-size: 15px; }
    

    .summary-row-ui { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 15px; }
    .summary-divider-ui { height: 1px; background: #edf2f7; margin: 20px 0; }
    
    .total-row-ui { display: flex; justify-content: space-between; align-items: flex-end; }
    .total-big-ui { font-size: 32px; font-weight: 600; }
    .tax-info-ui { font-size: 12px; color: #a0aec0; margin-top: 4px; }

    
    .top-mt{
        margin-top:-40px;
    }/* Background for the whole section */
.section-faq {
  background-color: #f8fafd;
}

/*download*/

.step-badge {
  width: 36px;
  height: 36px;
  background: #2f6fed;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-right: 10px;
}





.info-box {
  background: #FFF9C4;
  border: 1px solid #FFF9C4;
  border-radius: 16px;
  padding: 18px 22px;
  max-width: 1100px; /* aligns with cards */
  width: 100%;
}