/* Site custom styles for Bootstrap template */
:root{
  /* Map Elementor global colors to CSS vars used in template */
  --site-primary: #8c170e; /* --e-global-color-primary */
  --site-secondary: #BB2830; /* --e-global-color-secondary */
  --site-accent: #BB2830; /* --e-global-color-accent */
  --site-on-primary: #FFFFFF; /* --e-global-color-a2c2d36 */
  --site-heading: #103371; /* heading color from elementor kit */
  --site-link: #3C86CB; /* link color from elementor kit */
  --site-text: #000000; /* body text color from elementor kit */
}
/* Basic Bootstrap color overrides */
.bg-primary{background-color:var(--site-primary) !important}
.text-primary{color:var(--site-primary) !important}
.btn-primary{background-color:var(--site-primary);border-color:var(--site-primary)}

/* Fonts: replace the src urls with actual local font paths copied into assets/fonts/ */
/* Use fonts bundled in the original export to maintain exact typography.
   Paths are relative from this file to the workspace root's wp-content folder. */
@font-face{
  font-family: 'Open Sans';
  src: url('../fonts/opensans-13e91d7e.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family: 'Open Sans';
  src: url('../fonts/opensans-8a8b2b0f.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family: 'Shadows Into Light';
  src: url('../fonts/shadowsintolight-86162410.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family: 'Courgette';
  src: url('../fonts/courgette-2040bf70.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family: 'Commissioner';
  src: url('../fonts/commissioner-da0cac6e.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

@font-face{
    font-family: "Uni-Sans-Bold";
    src: url("../fonts/7c5f6ba6de4c282c78136b5d0a04e62f.eot");
    src: url("../fonts/7c5f6ba6de4c282c78136b5d0a04e62f.eot?#iefix")format("embedded-opentype"),
        url("../fonts/7c5f6ba6de4c282c78136b5d0a04e62f.woff")format("woff"),
        url("../fonts/7c5f6ba6de4c282c78136b5d0a04e62f.woff2")format("woff2"),
        url("../fonts/7c5f6ba6de4c282c78136b5d0a04e62f.ttf")format("truetype"),
        url("../fonts/7c5f6ba6de4c282c78136b5d0a04e62f.svg#Uni-Sans-Bold")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

body{font-family: 'Uni-Sans-Bold', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:var(--site-text); font-size:16px; font-weight:400; line-height:1.6; max-width: 100vw;overflow-x: hidden;}

/* Headings use Courgette to match original Elementor headings */
/* Set headings and typographic scale to match Elementor kit */
h1,h2,h3,h4,h5{font-family:'Uni-Sans-Bold', 'Courgette', cursive; color:#000;}
h1{font-size:65px;font-weight:800;line-height:1.2}
h2{font-size:45px;font-weight:700;line-height:1.2}
h3{font-size:32px;font-weight:700;line-height:1.3}
h4{font-size:25px;font-weight:600;line-height:1.4}
h5{font-size:16px;font-weight:600;line-height:1.5}
h6{font-family:'Courgette', cursive;font-size:16px;font-weight:600}

/* Small helpers to mimic Elementor spacing */
.hero{padding-top:4rem;padding-bottom:4rem}
.site-header .navbar-brand{font-weight:700}

/* Placeholder image style */
img[alt="milk"]{max-height:320px;object-fit:cover}

/* Keep utilities minimal; we'll port more rules from post-*.css as needed */

/* Icon strip */
.icon-strip{background:var(--site-primary)}
.icon-strip .icon-box{width:36px;height:36px;border-radius:4px;background:rgba(255,255,255,0.08)}

/* Icon strip small bordered squares */
.icon-strip .icon-svg{height: auto;
    max-width: 100%; object-fit:cover;border-radius:0px;border:0px solid rgba(255,255,255,0.12);padding:0px;background:transparent}
.top-framed-icons{background:var(--site-primary)}
.top-framed-icons .framed-row{padding:8px 0}
.top-framed-icons .framed-icons{gap:10px}
.top-framed-icons .frame{width:56px;height:56px;border:3px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;margin-right:8px;background:rgba(0,0,0,0.06)}
.top-framed-icons .frame img{max-width:42px;max-height:42px;object-fit:contain}

/* Site logo sizing and placement */
.site-logo{height:92px;object-fit:contain;margin-left:6px}

/* Right side contact & socials */
.contact-right .location{color:var(--site-on-primary);font-weight:600}
.contact-right .socials a{color:var(--site-on-primary);opacity:0.95;margin-left:6px}

/* Header inner tweaks to match screenshot spacing */
.site-header .header-inner{padding-top:6px;padding-bottom:10px}

/* Header background as in original */
.site-header{background:var(--site-primary);box-shadow: none}

/* Ported elementor header tokens (translated to Bootstrap selectors) */
.site-header{position:sticky;top:0;z-index:1050}
.site-header .header-inner{background-color:var(--site-primary);
    /* box-shadow:0px 5px 10px 0px rgba(0,0,0,0.15); */
    padding:5px 0 10px 0}

/* larger container like Elementor's boxed layout */
.site-header .container{max-width:1200px}
.site-header .shape-bottom{height:50px;overflow:hidden}
.site-header .shape-bottom svg{width:calc(100% + 1.3px);height:50px}

/* Nav/menu specific spacing mapped from Elementor rules (consolidated)
   - Elementor nav items use 12px left/right padding and white text on the red header.
   - Active/hover states keep the text visible and use a subtle translucent white background. */
.navbar-nav{gap:1rem}
.navbar-nav .nav-link{
  color:var(--site-on-primary);
  /* Elementor: padding-left:12px; padding-right:12px; vertical spacing set to match visual rhythm */
  padding:0.5rem 0.75rem; /* 8px 12px equivalent (Bootstrap rem scale) */
  font-weight:600; /* match exported navigation/button weight (Elementor uses 600 for nav) */
  font-family: 'Open Sans Local', Arial, sans-serif;
  font-size:16px;
  letter-spacing:0.1px;
  text-transform:none;
  transition:all .13s ease-in-out;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
  color:var(--site-on-primary);
  text-decoration:none;
  /* keep hover visual minimal like Elementor: white stays white, no inverted color on hover */
  transform:translateY(-1px);
}
.navbar-nav .nav-link.active{
  color:var(--site-on-primary); /* active shows as white text */
  background:none; /* Elementor keeps active text white without a heavy background */
  border-radius:0;
}

/* Exact Elementor-like selectors scoped to the header instance (.elementor-9 .elementor-element-2b223e3) */
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--main .elementor-item{
  color:var(--site-on-primary);
  fill:var(--site-on-primary);
  padding-left:12px;
  padding-right:12px;
}
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--main .elementor-item:hover,
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--main .elementor-item:focus{
  color:var(--site-on-primary);
  fill:var(--site-on-primary);
}

/* Dropdown (mobile) exact colors and background as in exported CSS */
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--dropdown a,
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-menu-toggle{
  color:#000000;fill:#000000;
}
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--dropdown{
  background-color:var(--site-on-primary); /* white dropdown panel */
  border-style:none;
}
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--dropdown a:hover,
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--dropdown a:focus,
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--dropdown a.highlighted{
  background-color:var(--site-secondary); /* small highlighted bg on hover inside dropdown */
}
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-nav-menu--dropdown a.elementor-item-active{
  color:var(--site-on-primary);
  background-color:var(--site-secondary);
}

/* Menu toggle icons and hover/focus state (fill color from export) */
.elementor-9 .elementor-element.elementor-element-2b223e3 div.elementor-menu-toggle{color:var(--site-on-primary);} 
.elementor-9 .elementor-element.elementor-element-2b223e3 div.elementor-menu-toggle svg{fill:var(--site-on-primary);} 
.elementor-9 .elementor-element.elementor-element-2b223e3 div.elementor-menu-toggle:hover,
.elementor-9 .elementor-element.elementor-element-2b223e3 div.elementor-menu-toggle:focus{color:var(--site-on-primary);} 
.elementor-9 .elementor-element.elementor-element-2b223e3 div.elementor-menu-toggle:hover svg,
.elementor-9 .elementor-element.elementor-element-2b223e3 div.elementor-menu-toggle:focus svg{fill:var(--site-on-primary);} 
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-menu-toggle:hover,
.elementor-9 .elementor-element.elementor-element-2b223e3 .elementor-menu-toggle:focus{background-color:var(--site-secondary);} 

/* Menu toggle (mobile) color and background similar to Elementor's menu toggle */
.navbar-toggler{background-color:transparent;border-color:rgba(255,255,255,0.15)}
.navbar-toggler-icon{filter:invert(1) brightness(1.2)}
.navbar-toggler svg, .navbar-toggler .navbar-toggler-icon{fill:var(--site-on-primary);color:var(--site-on-primary)}

/* Dropdown panel styling (when bootstrap collapse shows) to mimic Elementor dropdown colors */
.navbar-collapse.show{background:transparent}
.navbar-collapse .nav-link{color:var(--site-on-primary)}

/* Social icons in header */
.header-socials .elementor-social-icon i{color:#fff}
.header-socials .elementor-social-icon:hover i{color:rgba(255,255,255,0.85)}

/* Center nav links visually and make them slightly smaller on large screens */
.navbar-nav{gap:1rem}
.navbar-nav .nav-link{font-size:0.95rem}

/* Global elementor button tokens from kit (keeps hero override separately) */
.elementor-button, .elementor-button-like, .elementor-kit-27 .elementor-button, .elementor-kit-27 input[type="submit"], .elementor-kit-27 input[type="button"]{
  background-color:#103371; /* exported kit button background */
  color:#FFFFFF;
  border-radius:0px 30px 0px 30px;
  padding:20px 40px;
  font-family:'Open Sans', Sans-serif;
  font-weight:600;
}

/* Hero CTA primary red style (override for the hero and specific actions) */
.btn-hero-red{
    background:var(--site-primary);
    color:#fff;
    font-family: "Open Sans", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 0px 30px 0px 30px;
    padding: 15px 40px 15px 40px;
}
.btn-hero-red:hover{background:#9e2326}

/* Footer color block like design */
footer{background:var(--site-primary);padding-top:40px;padding-bottom:24px}

/* Three part header layout tweaks */
.navbar-brand{flex:0 0 auto}
.navbar-collapse{flex:0 1 auto}
.d-lg-flex.ms-auto{flex:0 0 auto}

/* Center menu on large screens */
@media (min-width: 992px){
  .navbar{align-items:center}
  .navbar-collapse{display:flex;justify-content:center}
  .navbar-nav{display:flex;align-items:center}
  .site-header .header-inner{padding-left:40px;padding-right:40px}
}

/* Improve centering of desktop nav and spacing for elementor classes */
.elementor-nav-menu.elementor-nav-menu--main{display:flex;gap:1rem;align-items:center}
.elementor-nav-menu.elementor-nav-menu--main .elementor-item{padding:0.5rem 0.75rem}

/* Vertical menu mode: when body has .vertical-menu, make the menu a left vertical sidebar on desktop */
@media (min-width: 992px){
  body.vertical-menu .header-inner{display:flex;}
  body.vertical-menu .container{max-width:1200px}
  /* Make the left column the vertical nav area */
  body.vertical-menu .logo-col{order:1;flex:0 0 220px}
  body.vertical-menu .menu-col{order:2;flex:0 0 260px;padding-top:1rem}
  body.vertical-menu .right-col{order:3;margin-left:auto}

  /* Vertical nav style */
  body.vertical-menu .menu-col .navbar-nav{flex-direction:column;align-items:flex-start;gap:0.25rem}
  body.vertical-menu .menu-col .nav-link{display:block;padding:0.6rem 1rem;color:var(--site-on-primary);background:transparent;border-radius:6px;width:100%;}
  body.vertical-menu .menu-col .nav-link:hover{background:rgba(255,255,255,0.04);color:var(--site-on-primary);}
  body.vertical-menu .menu-col .nav-link.active{background:rgba(255,255,255,0.06);color:var(--site-on-primary);}

  /* Make sure the right column content (cta/socials) stays aligned */
  body.vertical-menu .right-col{display:flex;align-items:center;gap:0.75rem}
}

/* Mobile: show toggler on right and collapse menu full width */
@media (max-width: 991px){
  /* When collapsed (mobile), Elementor used a white dropdown panel with dark links */
  .navbar-collapse{background:var(--site-on-primary);padding:10px 0;border-top:1px solid rgba(0,0,0,0.04)}
  .navbar-nav{flex-direction:column;gap:0.2rem}
  .navbar-nav .nav-link{padding:0.6rem 1rem;color:#111}
  .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus{color:var(--site-primary)}

  /* Toggler styled using the site's secondary color (Elementor used secondary for menu-toggle background) */
  .navbar-toggler{background:var(--site-secondary);border-color:transparent;padding:6px 10px;border-radius:8px}
  .navbar-toggler .navbar-toggler-icon{filter:none}
  .navbar-toggler .navbar-toggler-icon, .navbar-toggler svg{background-image:none;fill:#fff;color:#fff}
}

/* Toggler icon visibility: show hamburger when collapsed and close when expanded using aria-expanded state */
.elementor-menu-toggle .elementor-menu-toggle__icon--open{display:inline-block}
.elementor-menu-toggle .elementor-menu-toggle__icon--close{display:none}
.elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--open{display:none}
.elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close{display:inline-block}

/* Ensure toggler icons are visible and properly sized */
.elementor-menu-toggle .fas{font-size:20px;color:var(--site-on-primary)}

/* Mobile collapse panel: make links dark on white background (per exported Elementor) */
@media (max-width: 991px){
  #mobileNav{background:var(--site-on-primary);padding:10px 12px}
  #mobileNav .elementor-item{color:#111 !important;padding:12px 10px;display:block}
  #mobileNav .elementor-item:hover{color:var(--site-primary);background:rgba(0,0,0,0.02)}
}

/* Fix potential conflict where .navbar-nav earlier rules set white text for all nav links; prefer mobile-specific override */
.navbar-collapse .elementor-item{color:inherit}

/* Social icon style */
.socials a{color:#fff;opacity:0.95}
.socials a:hover{opacity:1;color:#ffffff}


/* Hero specifics */
.hero{min-height:420px;display:block;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.5);}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));}
.hero .container{position:relative;z-index:2}
.hero-title{font-family:'Courgette Local', 'Courgette', cursive;font-size:52px;line-height:1.05;margin-bottom:0.5rem}
.hero-sub{font-size:1.15rem}
.btn-pill{border-radius:30px}
.btn-light{color:var(--site-primary);background:#fff}

/* How button */
.btn-how{background:transparent;border:2px solid var(--site-primary);color:var(--site-primary);border-radius:40px;padding:10px 26px}

/* Vision section */
.rounded-left{border-radius:30px 30px 30px 30px}
.section-title{font-weight:700;margin-bottom:1rem}

/* Testimonial curved card */
.testimonial-card{border-radius:30px 30px 30px 30px;border:2px solid rgba(187,40,48,0.12);position:relative;overflow:visible}
.testimonial-card .quote-icon{position:absolute;top:-14px;right:10px;background:var(--site-primary);color:#fff;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700}
.testimonial-body{padding-left:0}
.testimonial-nav .nav-arrow{cursor:pointer;font-size:28px;color:var(--site-primary);padding:8px}
.testimonial-dots{color:var(--site-primary);letter-spacing:6px}

/* Testimonial slider styles */
.testimonial-slider{position:relative;overflow:hidden}
.testimonial-slide{display:none;opacity:0;transform:translateY(8px);transition:all .45s ease-in-out}
.testimonial-slide.active{display:block;opacity:1;transform:translateY(0)}
.testimonial-nav .btn{background:#fff;border:1px solid rgba(0,0,0,0.06);color:var(--site-primary)}
.testimonial-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.testimonial-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,0.5);opacity:0.6}
.testimonial-dots button.active{background:var(--site-primary);opacity:1}

@media (max-width: 767px){
    h1{font-size:45px;}
    h2{font-size:30px;}
    h3{font-size:25px;}
    h4{font-size:20px;}
    h5{font-size:14px;}
    h6{font-size:14px;}
}

/* Footer layout imitation */
footer{background:var(--site-primary);color:var(--site-on-primary)}
footer .container{display:flex;gap:2rem;flex-wrap:wrap}
footer small{opacity:0.9}

/* Site footer specific styling to match provided screenshot */
.site-footer{background:var(--site-primary);color:var(--site-on-primary);padding-top:40px;padding-bottom:30px}
.site-footer .footer-brand-col img{max-width:200px; width: 100%; height:auto;}
.site-footer .footer-brand-col .fs-3{font-family:'Courgette', cursive}
.site-footer .footer-links-list{padding:0;margin:0;list-style:none}
.site-footer .footer-links-list li{margin-bottom:14px;display:flex;align-items:center}
.site-footer .footer-links-list li:before{content:'\276F';display:inline-block;color:var(--site-on-primary);margin-right:12px;font-size:18px}
.site-footer .footer-link{color:var(--site-on-primary);text-decoration:none;font-weight:600}
.site-footer .footer-link:hover{text-decoration:none;opacity:0.95}
.site-footer .footer-contact-col i{color:var(--site-on-primary);opacity:0.95}
.site-footer .socials a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.08);color:var(--site-on-primary); text-decoration: none;}
.site-footer .socials a:hover{background:rgba(255,255,255,0.12)}
.site-footer .footer-copy{display:block;margin-top:12px;color:var(--site-on-primary);font-weight:600}

@media (max-width: 767px){
  .site-footer .footer-brand-col, .site-footer .footer-links-col, .site-footer .footer-contact-col{text-align:center}
  .site-footer .footer-brand-col .fs-3{margin-bottom:6px}
  .site-footer .socials{justify-content:center}
}

/* Top navigation styles are consolidated earlier to avoid duplicates */
/* style for header social anchors */
.header-socials a{color:#fff;margin-right:10px;font-size:18px;opacity:0.95}
.header-socials a:hover{opacity:1;color:#fff}

/* Header CTA style (if present) */
.header-cta .btn{background:#fff;color:var(--site-primary);border-radius:0px 30px 0px 30px;padding:20px 40px;font-weight:600;box-shadow:none}
.header-cta .btn:hover{background:#f6f6f6}

/* Make mobile collapse full width and visually separated */
@media (max-width: 991px){
  .navbar-collapse{background:rgba(0,0,0,0.03);padding:12px 16px;border-top:1px solid rgba(255,255,255,0.03)}
  .navbar-collapse .nav-link{color:#fff;padding:10px 12px}
}

/* When a nav-link inside the mobile collapse is clicked, make sure collapse hides (JS handles it) */
/* Small accessibility improvement: larger hit areas for mobile links */
@media (max-width: 991px){
  .navbar-collapse .elementor-item{padding:14px 12px;font-size:16px}
}

/* Keep desktop nav from wrapping on medium screens; allow scrolling if needed */
@media (min-width: 768px){
  .elementor-nav-menu.elementor-nav-menu--main{white-space:nowrap}
}

.elementor-button-like, .btn-pill{border-radius:30px;display:inline-block}
.btn-cta-light{background:#fff;color:var(--site-primary);border:2px solid #fff;padding:10px 30px;font-weight:700}
.btn-cta-primary{background:var(--site-primary);color:var(--site-on-primary);border:2px solid var(--site-primary);padding:10px 30px;font-weight:700}
.btn-cta-light:hover{background:#fff;opacity:0.95;color:var(--site-primary);text-decoration:none}
.btn-cta-primary:hover{background:#9e2326;color:#fff}

/* Make the hero CTA match original spacing */
.hero .btn-pill{padding:12px 34px;font-size:1.05rem}

/* Small screens: nav items more compact */
@media (max-width: 767px){
  .navbar-nav .nav-link{padding:0.45rem 0.5rem}
  .site-header .navbar-brand img{height:56px}
}

.menu-item{
    list-style: none;
    color: white;
    padding-left: 12px;
    padding-right: 12px;
}
.menu-item a{
    text-decoration: none;
    color: white;  
    flex-grow: 1;
    white-space: nowrap;
    font-family: "Open Sans", Sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.top-right-small{
    font-family: "Open Sans", Sans-serif;
    font-size: 16px;
    font-weight: 600;
}

/* --- Swiper / Elementskit-like testimonial styling --- */
.mySwiper{position:relative}
.mySwiper .swiper-wrapper{display:flex;align-items:center}
.mySwiper .swiper-slide{display:flex;justify-content:center}
.swiper-slide-inner{width:100%;max-width:620px}
.elementskit-single-testimonial-slider{background:#fff;border:3px solid var(--site-primary);border-radius:40px 60px 60px 40px;padding:48px 48px 56px 48px;position:relative;box-shadow: 8px 14px 28px rgba(0,0,0,0.12);overflow:visible}
/* create a soft curved cut / shadow on the bottom-right like the screenshot */
.elementskit-single-testimonial-slider:after{content:'';position:absolute;right:-30px;bottom:-28px;width:140px;height:140px;background:linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));border-radius:140px 0 140px 0;z-index:0}
.elementskit-watermark-icon.commentor-badge{position:absolute;top:-22px;right:12px;background:var(--site-primary);color:#fff;width:92px;height:92px;border-radius:0 92px 0 0;display:flex;align-items:flex-start;justify-content:flex-end;padding:10px;font-size:28px;z-index:2}
.elementskit-commentor-image img{width:84px;height:84px;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,0.08)}
.elementskit-profile-info .elementskit-author-name{display:block;font-weight:700;font-size:20px}
.elementskit-author-des{color:rgba(0,0,0,0.6);font-size:14px}
.elementskit-commentor-content p{font-family:'Courgette', serif;font-size:20px;line-height:1.9;color:#111;margin-top:6px;text-align:center;margin-left:auto;margin-right:auto;max-width:520px}
.elementskit-stars li{list-style:none}
.elementskit-stars svg{fill:var(--site-primary);width:18px;height:18px}

/* Swiper navigation arrows positioned like the screenshot */
.swiper-button-next, .swiper-button-prev{color:var(--site-primary);width:48px;height:48px;background:#ffffff00;display:flex;align-items:center;justify-content:center;z-index:3; border: none; }
.swiper-button-next:after, .swiper-button-prev:after{font-size:22px;color:var(--site-primary)}
.swiper-button-prev{left:-36px;top:50%;transform:translateY(-50%)}
.swiper-button-next{right:-36px;top:50%;transform:translateY(-50%)}

/* Pagination dots larger and red */
.swiper-pagination-bullet{width:14px;height:14px;background:rgba(187,40,48,0.25);opacity:0.95;border-radius:50%;margin:0 6px}
.swiper-pagination-bullet-active{background:gba(187,40,48,0.25);box-shadow:0 4px 10px rgba(187,40,48,0.18)}

@media (max-width: 991px){
  .elementskit-single-testimonial-slider{padding:18px;border-radius:18px}
  .elementskit-watermark-icon.commentor-badge{width:60px;height:60px;top:-14px;right:10px;padding:8px;font-size:18px}
  .swiper-button-prev{left:8px;right:auto}
  .swiper-button-next{right:8px;left:auto}
  .swiper-button-prev, .swiper-button-next{width:40px;height:40px}
}

.elementor-shape-fill{
    fill: var(--site-primary);
    transform: rotateY(0deg);
    transform-origin: center;
}

.round-icon{
    font-size: 25px;
    border: 3px solid #bb2830;
    color: #bb2830;
    padding: .5em;
    border-radius: 50%;
    height: 55px;
    width: auto;
    display: inline-block;
    text-align: center;
    aspect-ratio: 1 / 1;
    line-height: 0;
}

.gallery img {
      cursor: pointer;
      transition: 0.3s;
    }
    .gallery img:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
     .modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    padding: 10px 18px;
    cursor: pointer;
    border-radius: 50%;
    user-select: none;
    /* background: rgba(0, 0, 0, 0.4); */
    transition: all 0.3s ease;
    z-index: 1;
  }
  .modal-nav:hover {
    /* background: rgba(0, 0, 0, 0.7); */
    transform: translateY(-50%) scale(1.15);
  }
  .modal-prev {
    left: 20px;
  }
  .modal-next {
    right: 20px;
  }