/*
Theme Name: Marvis LP
Theme URI: https://marvisclinic.com
Author: Ameen Masmoodi
Author URI: https://linkedin.com/ameenmasmoodi
Description: A minimal custom landing page theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: LP Marvis
*/


@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

html[lang="fr"] body {
  direction: ltr !important;
  text-align: left !important;
}

html[lang="ar"] body {
  direction: rtl !important;
  text-align: right !important;
}

body {
  font-family: "Almarai", sans-serif !important;
  background-color: #fcfcfc !important;
}

body.ltr .text-start {
  text-align: left !important;
}
body.ltr .me-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.ltr .ms-auto {
  margin-right: auto !important;
  margin-left: 0 !important;
}

p, input, button, select, textarea, h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Almarai", sans-serif !important;
}


/************************************************ Button - START ************************************************/
.btn-primary-01,
.btn-primary-02{
  border-radius:99px !important;
  --bs-btn-padding-y: 0.75rem !important;
  font-size: 1.125rem !important;
}

.btn-primary-01{
  background-color: #2171cb !important;
  color: #fff !important;
}
.btn-primary-02{
  background-color: #0074e4;
  color: #fff;
}
/************************************************ Button - END ************************************************/

/************************************************ Accordion - START ************************************************/
.container .accordion{
      margin:1rem auto!important;
      padding:0!important;
  }

  .accordion-button{
  background-color:#f8f9fa;
  border:none;
  border-radius:10px 10px 0 0;
  font-weight:700;
  padding:1.6rem 20px !important;
  transition:transform .3s;
  box-shadow:none;
  font-size:1.125rem !important;
}
.accordion-item{
  background-color:#f1f1f1;
  border-radius:1.25rem !important;
  margin-bottom: 1rem;
  border: 1px solid #e2e8f0 !important;
  overflow:hidden;
  box-shadow:none
}
.accordion-body{
  font-size:16px;
  padding:15px 20px;
  border-top:1px solid #ccc;
  border-radius:0 0 10px 10px
}
.container .accordion{
  margin:0 auto;
  padding:0 20px
}
.accordion-button:not(.collapsed){
  color:#000!important;
  background-color:inherit!important;
  box-shadow:none!important
}
.accordion-button:focus{
  border-color:transparent!important;
  box-shadow:none!important
}

/************************************************ Accordion - END ************************************************/
/************************************************ Carousel - START ************************************************/

.carousel-indicators{
  position:relative!important;
  left:0;
  bottom:0;
  right:0;
  z-index:2;
  display:flex;
  justify-content:center;
  padding:0;
  list-style:none
}
.carousel-indicators button{
  box-sizing:content-box;
  flex:0 1 auto;
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  padding:0;
  margin-left:3px;
  margin-right:3px;
  cursor:pointer;
  background-color:#000!important;
  background-clip:padding-box;
  border:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  opacity:.5;
  transition:opacity .6s
}
.carousel-control-next,.carousel-control-prev{
  display:none!important
}
/************************************************ Carousel - END ************************************************/

/************************************************ Logo - START ************************************************/

.header-logo {
    height: 48px; /* Mobile default */
}
@media (min-width: 768px) {
    .header-logo {
        height: 55px; /* Desktop */
    }
}
/************************************************ Logo - END ************************************************/

/************************************************ BG & Text colors - START ************************************************/
.bg-main{
  background-color: #749fcc;
}
.bg-second{
  background-color: #F0F7FF;
}
.bg-hero {
  background-color: #E6EFF8;
}
.light-bg{
  background-color: #fcfcfc !important;
}

.primary-text{
  color: #749fcc !important;
}
.secondary-text{
  color: #737373 !important;
}
.dark-text{
  color: #1a1a1a !important;
}
/************************************************ BG & Text - END ************************************************/

.card-img-tops{
    max-height: 340px !important;
    border-radius: 1.5rem !important;
    -o-object-fit: cover !important;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    width: 100%;
}

.header-main{
  position:relative;
  z-index: 10 !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.form-control-lg{
  font-size:1.125rem!important
}
.iti__country-container{
  right:0!important
}

html[lang="ar"] input[type="email"] {
  direction: rtl !important; /* override the default */
  text-align: start; /* optional for visual alignment */
}

html[lang="ar"] .iti__tel-input[type="tel"] {
  direction: ltr !important; /* Keeps numbers flowing naturally left-to-right */
  text-align: right !important; /* Aligns text to the right */
  padding-inline-end: var(--iti-right-hand-selected-country-padding) !important; /* Makes room on the right side */
}

.base-text{
  font-size:1.25rem;
  font-weight:500!important;
  line-height:160%!important
}

.text-stat{
  font-size:1.2rem!important;
  color:#4b4b4b;
  line-height:130%!important;
  font-weight:600!important;
}



.hero-img img{
  border-radius:24px!important
}

.card.treatment-card {
  border-radius: 2.5rem!important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

.card-text{
  font-size: 1.125rem!important;
  line-height: 160%!important;
  color: #737373 !important;
}

.bullet-text{
    font-size: 1.125rem!important;
}

.fw-700{
  font-weight: 700!important
}
.fw-600{
  font-weight: 600!important
}
.fw-500{
  font-weight: 500!important
}


/************************************************ Contact - START ************************************************/


.contact-form-block textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}

.contact-form-block input:focus,
.contact-form-block textarea:focus {
    border-color: #000;
    background: #fff;
    outline: none;
}

.contact-form-block textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form-block button {
    padding: 0.9rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    background: #000;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.contact-form-block button:hover {
    background: #333;
}

.contact .icon{
        border-radius: 1rem;
        padding:2rem;
        color:#1d1d1d;
          border:1px solid #e2e8f0 !important;
          font-size: 1.5rem !important;
          line-height:0 !important

}

.social i{
   font-size: 1.5rem !important; 
}


a{
  text-decoration: none !important;
}


/************************************************ Contact - END ************************************************/


/* ============================================
   GLOBAL RESET FOR FLUENTFORM
   ============================================ */
.fluentform_wrapper_1 * {
  box-sizing: border-box;
  font-family: inherit;
}

/* Apply to all */
.fluentform_wrapper_1 [data-name="ff_cn_id_1"] .ff-el-group .ff-el-form-control {
  margin-bottom: 0.8rem !important;
}

/* Reset only if it's the last of its type */
.fluentform_wrapper_1 .ff-el-group .ff-el-form-control#ff_4_email {
  margin-bottom: 0 !important;
}

/* Remove fieldset, hr style */
.fluentform_wrapper_1 fieldset {
  display: flex; 
  flex-direction: column;
  gap: 1.5rem;
}
.fluentform_wrapper_1 hr {
  margin: 1rem 1.5rem 0rem 0rem !important;
  opacity: 0.15;
}

.ff-default .ff-el-form-check label.ff-el-form-check-label {
    margin-bottom: 0 !important;
}

.fluentform .ff-t-column-1 .gender_input {
    margin-bottom: 1rem !important;
}

@media only screen and (min-width: 641px) {
    .fluentform .ff-el-group.ff_list_inline .ff-el-form-check {
         margin: 0 1rem 0 0 !important;
    }
}

.fluentform .ff-el-form-check {
     margin-bottom: 0 !important; 
}

.fluentform_wrapper_1 [data-name="ff_cn_id_3"] .question-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fluentform_wrapper_1 [data-name="ff_cn_id_3"] .ff-el-group label{
  margin: 0 !important;
}

/* ============================================
   LABELS (Bootstrap style)
   ============================================ */
.fluentform_wrapper_1 label {
  font-weight: 600;
  margin-bottom: .25rem;
  display: inline-block;
}

/* ============================================
   INPUTS + TEXTAREA + SELECT
   (Updated to grey bg, no border, full rounded)
   ============================================ */
.fluentform_wrapper_1 input.ff-el-form-control,
.fluentform_wrapper_1 textarea.ff-el-form-control,
.fluentform_wrapper_1 select.ff-el-form-control {
  width: 100%;
  display: block;
  padding: .6rem .9rem !important;
  font-size: 1rem;
  border: none !important;              /* Removed border */
  border-radius: 1.25rem !important;       /* Full rounded (pill shape) */
  background-color: #fff  !important; /* Grey background */
  line-height: 1.4;
  transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Large input like .input-group-lg */
.fluentform_wrapper_1 input.ff-el-form-control,
.fluentform_wrapper_1 select.ff-el-form-control {
  padding: 1.125rem 1.5rem !important;
  font-size: 1.125rem !important;
  height: auto !important;
}

/* Placeholder style */
.fluentform_wrapper_1 ::placeholder {
  color: #999 !important;
}

/* Focus */
.fluentform_wrapper_1 input.ff-el-form-control:focus,
.fluentform_wrapper_1 textarea.ff-el-form-control:focus,
.fluentform_wrapper_1 select.ff-el-form-control:focus {
  background-color: #fff !important; /* Slightly darker grey on focus */
  box-shadow: 0 0 0 0.20rem rgba(13, 110, 253, .15) !important;
  outline: none !important;
}

/* ============================================
   RADIO + CHECKBOX
   ============================================ */
.fluentform_wrapper_1 .ff-el-form-check-input {
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin-right: .35rem !important;
}

.fluentform_wrapper_1 .ff-el-form-check {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
}

.fluentform_wrapper_1 .ff-el-form-check-label span {
  font-weight: normal;
  font-size: 1rem;
}

/* ============================================
   DROPDOWNS (to match Bootstrap form-select-lg)
   ============================================ */
.fluentform_wrapper_1 select.ff-el-form-control {
  appearance: auto !important;
  padding: .9rem 1rem !important;
  margin-top: 1rem;
}

/* ============================================
   TEXTAREA (Bootstrap look - adjusted for usability)
   ============================================ */
.fluentform_wrapper_1 textarea.ff-el-form-control {
  resize: vertical;
  padding: 1rem 1.5rem !important;
  font-size: 1rem;
  border-radius: 25px !important; /* Slightly less than 50px so it looks better as a box */
}

/* ============================================
   SUBMIT BUTTON (match your Bootstrap button)
   ============================================ */
.fluentform_wrapper_1 .ff-btn-submit {
  width: 100%;
  background-color: #2171cb !important; /* Grey background as requested */
  border: none !important;
  padding: .9rem 1rem !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: 50px !important;      /* Full rounded */
  color: #fff !important;              /* Darker text for grey button visibility */
  cursor: pointer;
  transition: 0.2s ease;
}

.fluentform_wrapper_1 .ff-btn-submit:hover {
  background-color: #e0e0e0 !important;
}

/* ============================================
   REMOVE EXTRA SPACING FROM FF STRUCTURE
   (to make it clean like your Bootstrap version)
   ============================================ */
.fluentform_wrapper_1 .ff-el-section-title {
  display: none;
}
.fluentform_wrapper_1 .ff-el-input--label {
  margin-bottom: .25rem !important;
}

.ff-default .ff-el-input--label label {
    font-size: 1.325rem;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.fluentform .ff-el-group {
    margin-bottom: 0px !important;
}

.ff-el-section-break hr {
    background-color: #212529 !important;
}

/* ============================================
 Card Setup 
 ============================================ */
.dtc-slide-card {
    width: 100%;
    aspect-ratio: 4 / 5; /* Clean vertical aesthetic */
    background-color: #fcfbf9; /* Soft cosmetic warm-white */
    border-radius: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}

/* Ensure images & videos fill the card completely */
.dtc-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* Video UI Layer */
.video-container {
    position: relative;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15); /* Soft dimming for play button contrast */
    transition: background 0.3s ease;
    z-index: 2;
}

/* Glassmorphism Play/Pause Button */
.play-toggle-btn {
    border: none;
    outline: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease;
}

.play-toggle-btn:hover {
    transform: scale(1.08);
    background: #ffffff;
}

/* Active Video States */
.video-container.is-playing .video-overlay {
    background: rgba(0, 0, 0, 0); /* Remove dimming when playing */
}

/* Fade out button on play, show on hover */
.video-container.is-playing .play-toggle-btn {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.9);
    pointer-events: none;
}

.video-container.is-playing:hover .play-toggle-btn {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}



/* Reset Splide's default absolute position for arrows */
#splide-testimonials .splide__arrows {
    position: static;
}

#splide-testimonials { 
  .splide__arrow {
    position: static !important;
    transform: none !important;
    width: 3rem;
    height: 3rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #0f172a;
    transition: all 0.2s ease;
    opacity: 1;
  }

  .splide__arrow:hover:not(:disabled) {
    background-color: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
  }
 
  .splide__arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #cbd5e1;
  }

  .splide__arrow svg {
    position: static;
    transform: none;
    fill: none;
  }
}

#splide-cards { 
  .splide__arrow {
    width: 3rem;
    height: 3rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #0f172a;
    transition: all 0.2s ease;
    opacity: 1;
  }

  .splide__arrow:hover:not(:disabled) {
    background-color: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
  }
 
  .splide__arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #cbd5e1;
  }
}

/* Apply center scaling/opacity ONLY on desktop */
@media (min-width: 769px) {
    #splide-testimonials .splide__slide {
        opacity: 0.6;
          margin-left: 0 !important;

        transform: scale(0.92);
        transition: transform 0.3s ease, opacity 0.3s ease;

    }

    #splide-testimonials .splide__slide.is-active {
        opacity: 1;
        transform: scale(1);
        z-index: 2; /* Keeps the middle slide visually on top */

    }
}

/* On mobile, ensure 100% opacity and clean natural sizing */
@media (max-width: 768px) {
    #splide-testimonials .splide__slide {
        opacity: 1 !important;
        transform: none !important;
    }
}

.primary-text { color: #007bff; }
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    
    .btn-primary-01 {
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 8px;
        transition: transform 0.2s;
    }
    
    .btn-primary-01:hover {
        transform: translateY(-2px);
        background-color: #0056b3;
    }

    @media (max-width: 767.98px) {
        .row-cols-2 .col {
            display: flex;
            justify-content: center;
        }
    }

     .primary-text { color: #007bff; }
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .benefits{
                margin-top:2rem !important;

    }
    .benefit-item{    
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
    .btn-primary-01 {
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 8px;
        transition: transform 0.2s;
    }
    
    .btn-primary-01:hover {
        transform: translateY(-2px);
        background-color: #0056b3;
    }

    @media (max-width: 767.98px) {
        .row-cols-2 .col {
            display: flex;
            justify-content: center;
        }
    }

    
.border-border {
    border-color: #e5e7eb !important;
}