/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


/* Button Style */
.drButton{
    --btn-bg:#000;
    --btn-bg-hover:#474747;
    --btn-color:#fff;
    --btn-color-hover:#fff;
    --btn-y-padd:12px;
    --btn-x-padd:20px;
    --btn-border-radius:200px;
    --btn-shadow: 0 8px 22px rgba(0,0,0,.14);
    --btn-shadow-hover: 0 10px 26px rgba(0,0,0,.18);
    --btn-gap: 12px;
    --btn-icon-size: 0.9em;
    --btn-font-size: 15px;

    display: inline-flex;
    gap: var(--btn-gap);
    align-items: center;
    justify-content: center;

    background: var(--btn-bg);
    padding: var(--btn-y-padd) var(--btn-x-padd);
    box-shadow: var(--btn-shadow);
    border-radius: var(--btn-border-radius);
    color: var(--btn-color);

    font-size: var(--btn-font-size);
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;

    transform: translateZ(0);
    transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .12s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

/* Hover / Active / Focus */
.drButton:hover{
    background: var(--btn-bg-hover);
    color: var(--btn-color-hover);
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-5px);
}
.drButton:active{
  transform: translateY(0);
  box-shadow: var(--btn-shadow);
}
.drButton:focus-visible{
  outline: 2px solid #000000;
  outline-offset: 2px;
}

/* Elements (BEM) */
.drButton__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  line-height: 0;
  flex: 0 0 auto;
}
.drButton__icon img,
.drButton__icon svg,
.drButton__icon i{
  width: 100%;
  height: 100%;
  display: block;
}

.drButton__text{
  display: inline-block;
}

/* Icon Position */
.drButton-left{ flex-direction: row; }
.drButton-right{ flex-direction: row-reverse; }

/* Sizes */
.drButton--sm{
  --btn-font-size: 14.5px;
  --btn-y-padd: 8px;
  --btn-x-padd: 16px;
}
.drButton--md{
  --btn-font-size: 16.5px;
  --btn-y-padd: 10px;
  --btn-x-padd: 20px;
}
.drButton--lg{
  --btn-font-size: 18.5px;
  --btn-y-padd: 12px;
  --btn-x-padd: 24px;
}
.drButton--xl{
  --btn-font-size: 20.5px;
  --btn-y-padd: 14px;
  --btn-x-padd: 28px;
}
.drButton--2xl{
  --btn-font-size: 23.5px;
  --btn-y-padd: 16px;
  --btn-x-padd: 32px;
}

@media (max-width: 992px){
  .drButton--sm{
    --btn-font-size: 13px;
    --btn-y-padd: 7px;
    --btn-x-padd: 14px;
  }
  .drButton--md{
    --btn-font-size: 15px;
    --btn-y-padd: 9px;
    --btn-x-padd: 18px;
  }
  .drButton--lg{
    --btn-font-size: 17px;
    --btn-y-padd: 11px;
    --btn-x-padd: 22px;
  }
  .drButton--xl{
    --btn-font-size: 19px;
    --btn-y-padd: 13px;
    --btn-x-padd: 26px;
  }
  .drButton--2xl{
    --btn-font-size: 21px;
    --btn-y-padd: 15px;
    --btn-x-padd: 30px;
  }
}

/* Mobile */
@media (max-width: 576px){
  .drButton--sm{
    --btn-font-size: 13px;
    --btn-y-padd: 6px;
    --btn-x-padd: 13px;
  }
  .drButton--md{
    --btn-font-size: 14px;
    --btn-y-padd: 8px;
    --btn-x-padd: 16px;
  }
  .drButton--lg{
    --btn-font-size: 16px;
    --btn-y-padd: 10px;
    --btn-x-padd: 20px;
  }
  .drButton--xl{
    --btn-font-size: 18px;
    --btn-y-padd: 12px;
    --btn-x-padd: 24px;
  }
  .drButton--2xl{
    --btn-font-size: 20px;
    --btn-y-padd: 14px;
    --btn-x-padd: 28px;
  }
}

/* Full Width */
.drButton--block{
  width: 100%;
}


/* variants */
.drButton--Primary{
  --btn-bg:#03AFBD;
  --btn-bg-hover:#03AFBD;
}
.drButton--PrimaryRev{
  --btn-color:#03AFBD;
  --btn-color-hover:#03AFBD;
  --btn-bg:#ffff;
  --btn-bg-hover:#ffff;
}
.drButton--Second{
    --btn-bg:#057782;
  --btn-bg-hover:#057782;  
}
/* Button Style */


/* =====================================
   Darabian Dynamic Typography System
   - Sizes + Weights like Figma
   - Base + Modifiers + Responsive scale
   ===================================== */

/* 1) Global type scale (edit here anytime) */
:root{
  /* --- Font Sizes (desktop base) --- */
  --dr-fs-xs: 12px;
  --dr-fs-sm: 14px;
  --dr-fs-md: 16px;
  --dr-fs-lg: 20px;
  --dr-fs-xl: 26px;
  --dr-fs-2xl: 36px;
  --dr-fs-3xl: 46px;
  --dr-fs-4xl: 60px;

  /* --- Font Weights (Figma-like naming) --- */
  --dr-fw-thin: 100;
  --dr-fw-extralight: 200;
  --dr-fw-light: 300;
  --dr-fw-regular: 400;
  --dr-fw-medium: 500;
  --dr-fw-demibold: 600;   /* Demi Bold = SemiBold */
  --dr-fw-bold: 700;
  --dr-fw-extrabold: 800;
  --dr-fw-black: 900;

  /* --- Line heights --- */
  --dr-lh-tight: 1.2;
  --dr-lh-snug: 1.35;
  --dr-lh-normal: 1.6;
  --dr-lh-loose: 1.9;
}

/* 2) Base text class */
.drText{
  font-size: var(--dr-size, var(--dr-fs-md));
  font-weight: var(--dr-weight, var(--dr-fw-regular));
  line-height: var(--dr-line, var(--dr-lh-snug));
  margin: 0;
}

/* 3) Size modifiers */
.drText--xs{  --dr-size: var(--dr-fs-xs); }
.drText--sm{  --dr-size: var(--dr-fs-sm); }
.drText--md{  --dr-size: var(--dr-fs-md); }
.drText--lg{  --dr-size: var(--dr-fs-lg); }
.drText--xl{  --dr-size: var(--dr-fs-xl); }
.drText--2xl{ --dr-size: var(--dr-fs-2xl); }
.drText--3xl{ --dr-size: var(--dr-fs-3xl); }
.drText--4xl{ --dr-size: var(--dr-fs-4xl); }

/* 4) Weight modifiers (Figma style) */
.drText--thin{       --dr-weight: var(--dr-fw-thin); }
.drText--extralight{ --dr-weight: var(--dr-fw-extralight); }
.drText--light{      --dr-weight: var(--dr-fw-light); }
.drText--regular{    --dr-weight: var(--dr-fw-regular); }
.drText--medium{     --dr-weight: var(--dr-fw-medium); }
.drText--demibold{   --dr-weight: var(--dr-fw-demibold); }
.drText--bold{       --dr-weight: var(--dr-fw-bold); }
.drText--extrabold{  --dr-weight: var(--dr-fw-extrabold); }
.drText--black{      --dr-weight: var(--dr-fw-black); }

/* 5) Line-height modifiers */
.drText--tight{  --dr-line: var(--dr-lh-tight); }
.drText--snug{   --dr-line: var(--dr-lh-snug); }
.drText--normal{ --dr-line: var(--dr-lh-normal); }
.drText--loose{  --dr-line: var(--dr-lh-loose); }

/* Text Colors */
.drText--blackk {color:#000;}
.drText--primary {color:#03AFBD;}
.drText--secondary {color:#057782;}
.drText--gray {color:#ebebeb;}

/* 6) Handy helpers */
.drText--center{ text-align: center; }
.drText--right{  text-align: right; }
.drText--left{   text-align: left; }
.drText--justify{   text-align: justify;}

/* 7) Optional: text color helpers (اگر خواستی)
   مثال استفاده: drText drText--md drText--regular drText--muted
*/
.drText--muted{ color: rgba(0,0,0,.65); }
.drText--white{ color: #fff; }

/* 8) Responsive scaling (auto smaller on tablet/mobile)
   فقط مقیاس‌ها کوچیک میشن، کلاس‌ها ثابت می‌مونن
*/
@media (max-width: 992px){
  :root{
    --dr-fs-xl: 22px;
    --dr-fs-2xl: 30px;
    --dr-fs-3xl: 36px;
    --dr-fs-4xl: 46px;
  }
.drText--tab--center{ text-align: center; }
.drText--tab--right{  text-align: right; }
.drText--tab--left{   text-align: left; }
.drText--tab--justify{ text-align: justify; }
}
@media (max-width: 576px){
  :root{
    --dr-fs-lg: 18px;
    --dr-fs-xl: 22px;
    --dr-fs-2xl: 26px;
    --dr-fs-3xl: 30px;
    --dr-fs-4xl: 38px;
  }
.drText--mob--center{ text-align: center; }
.drText--mob--right{  text-align: right; }
.drText--mob--left{   text-align: left; }
.drText--mob--justify{ text-align: justify; }
}
/* =====================================
   Darabian Dynamic Typography System
   - Sizes + Weights like Figma
   - Base + Modifiers + Responsive scale
   ===================================== */

/* ================================
   Darabian Dynamic Spacing (Margin Bottom)
   ================================ */
/* 1) مقیاس فاصله‌ها */
:root{
  --dr-mb-0: 0;
  --dr-mb-xs: 6px;
  --dr-mb-sm: 10px;
  --dr-mb-md: 16px;
  --dr-mb-lg: 24px;
  --dr-mb-xl: 32px;
  --dr-mb-2xl: 48px;
  --dr-mb-3xl: 56px;
}

/* 2) کلاس پایه */
.drMB{
  margin-bottom: var(--dr-mb, var(--dr-mb-md));
}

/* 3) مودفایرها */
.drMB--0   { --dr-mb: var(--dr-mb-0); }
.drMB--xs  { --dr-mb: var(--dr-mb-xs); }
.drMB--sm  { --dr-mb: var(--dr-mb-sm); }
.drMB--md  { --dr-mb: var(--dr-mb-md); }
.drMB--lg  { --dr-mb: var(--dr-mb-lg); }
.drMB--xl  { --dr-mb: var(--dr-mb-xl); }
.drMB--2xl { --dr-mb: var(--dr-mb-2xl); }
.drMB--3xl { --dr-mb: var(--dr-mb-3xl); }

/* 4) ریسپانسیو اختیاری (فاصله‌ها تو موبایل کمتر بشن) */
@media (max-width: 576px){
  :root{
    --dr-mb-md: 12px;
    --dr-mb-lg: 18px;
    --dr-mb-xl: 24px;
    --dr-mb-2xl: 32px;
	--dr-mb-3xl: 38px;
  }
}
/* ================================
   Darabian Dynamic Spacing (Margin Bottom)
   ================================ */


/* ================================
   Darabian Dynamic Notice PM
   ================================ */
/* .drNotice{
  --notice-size: clamp(14px, 1.5vw, 16px);

  display: inline-flex;
  align-items: center;
  gap: calc(var(--notice-size) * 0.6);

  background: #C9E5E7;
  color: #057782;

  padding: calc(var(--notice-size) * 0.65)
           calc(var(--notice-size) * 1.3);

  border-radius: 9999px;
  line-height: 1.2;
}

.drNotice > img{
  width: calc(var(--notice-size) * 1.2);
  height: calc(var(--notice-size) * 1.2);
} */
.drNotice{
	
  --notice-radius: clamp(8px, 2vw, 9999px);
	
  /* فونت فلویید + کمی بزرگ‌تر برای موبایل */
  --notice-size: clamp(14px, 1.4vw + 0.25rem, 17px);

  /* فاصله و پدینگ فلویید */
  --notice-gap: clamp(6px, 0.55em, 12px);
  --notice-py: clamp(7px, 0.6em, 11px);
  --notice-px: clamp(11px, 1.15em, 20px);

  /* آیکن فلویید */
  --notice-icon: clamp(16px, 1.2em, 22px);

  display: inline-flex;
  align-items: center;
  gap: var(--notice-gap);
  border:1.2px solid #03AFBD;

  background: #D6F2F4;
  color: #057782;

  padding: var(--notice-py) var(--notice-px);
  border-radius: var(--notice-radius);
  line-height: 1.35;
  font-size: var(--notice-size);

  /* Notice تعاملی نیست */
  cursor: default;
  user-select: none;
  text-decoration: none;

  /* مدیریت متن‌های طولانی */
  white-space: normal;        /* اجازه‌ی چندخطی شدن */
  max-width: 100%;            /* از کانتینر بیرون نزنه */
  overflow-wrap: anywhere;    /* کلمات خیلی بلند هم بشکنن */
  word-break: break-word;
}

/* آیکن (img یا svg) */
.drNotice > img,
.drNotice > svg{
  width: var(--notice-icon);
  height: var(--notice-icon);
  flex: 0 0 auto;
}

/* اگر داخلش متن جداگانه داری */
.drNotice .text{
  flex: 1 1 auto;
  min-width: 0; /* کمک می‌کنه wrap بهتر انجام بشه */
}

/* حذف هرگونه اثر hover/active/focus اگر جایی به a یا button تبدیل شد */
.drNotice:hover,
.drNotice:active,
.drNotice:focus,
.drNotice:focus-visible{
  background: #C9E5E7;
  color: #057782;
  box-shadow: none;
  outline: none;
}
/* ================================
   Darabian Dynamic Notice PM
   ================================ */


/* Nothing Style */

@media (max-width: 576px) {
.MobNothingStyle{
margin:0px !important;
padding:0px !important;
}
}

.NothingStyle{
margin:0px !important;
padding:0px !important;
}
/* Nothing Style */

/* Header Style */
#masthead > .header-inner > .show-for-medium > .mobile-nav > .html.header-button-1{
width:max-content !important;
}

#masthead > .header-inner > .flex-col > .header-nav{
justify-content: center;
}
/* Header Style */


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}