*{
    padding: 0;
    margin:0;
    font-family: 'barlow', sans-serif;
}

body { 
    position: relative; 
    left: 0 !important; 
    width: 100% !important; 
    min-height: 100vh !important;  
    top: 0 !important; 
    margin: 0 !important; 
    margin-top: 50px !important;
}

.protector{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px !important;
}

html.translated-rtl body{
    top:0 !important;
}

.decr_letter_spac{
    letter-spacing: -1px !important;
}

button{
    /*background-color:#fff;*/
}

.textCase{
    text-transform: capitalize
}

#testCasesSelect{
    text-transform: capitalize !important
}

main {
    flex: 1;
}


.my_section {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: visible;
    min-height: calc(85vh - 60px);
    padding-bottom: 10px;
}

.my_sectionB{
    border-radius: 10px;
    background: linear-gradient(193deg,#0034ff, rgb(3,166,252) 48.32%, rgb(3,165,252) 74.37%,#001bff) !important;
    box-shadow: 0 0 100px -10px rgba(0, 0, 0, 0.11);
    padding: 10px 40px 0 40px;
}

.my_sectionB .resetBtn{
    background: transparent;
    border-right: 2px solid #000 !important;
    border-left: 2px solid #000 !important;
}

.my_sectionB .resetBtn:hover{
    background: #000;
    color: #fff;
}

.my_sectionB .BarBtnsBox{
    width: 80%;
    background-image: none;
    background-color: #fff;
}

.my_sectionB .btnBar button{
     color: #000;
     background-color: #fff;
     background: #fff;
}

.btnBar{
    width: 90%;
    margin-left: 5%;
    text-align: center;
    min-height: 22px;
    max-height: 22px;
    margin-bottom: 1px;
}

.BarBtnsBox{
    display: flex;
    min-width: 77%;
    max-width: 77%;
    margin-left: 11.5%;
    border-radius: 8px;
    justify-content: center;
    background-image: linear-gradient(to right,#fff, #fff,#fff,#0026FF,#0026FF,#0026FF,#fff,#fff,#fff );
}

.hide{
    display: none !important;
}

.btnBar button{
    width: 100%;
    border: none;
    min-height: 22px;
    max-height: 22px;
    font-size: 11px;
    color: #fff;
    transition: .1s;
}

.themeIcon{
    border-radius: 8px 0 0 8px;
    text-align: left;
    min-width: 35%;
    background: linear-gradient(to right, #00D9FF, #0026FF, #0026FF);
}

.resetBtn{
  min-width: 14%;
  max-width: 14%;
  background: #0026FF;
  text-align: center;
  position: relative;
  border-radius: 8px;
  border-right: 1px solid #fff !important;
  border-left: 1px solid #fff !important;
  transition: .3s !important
}

.resetBtn:hover{
    background: #000;
    color: #fff;
    border-right: 1px solid #000 !important;
    border-left: 1px solid #000 !important;
}

.earthIcon{
    min-width: 35%;
    border-radius: 0 8px 8px 0;
    text-align: right;
    background: linear-gradient(to left, #00D9FF, #0026FF, #0026FF);
}

.btnBar button font{
    position: relative;
    top: -4px;
}

.themeIcon img{
    margin-right: 50px;
}

.earthIcon img{
    margin-left: 30px;
}

.btnBar div{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    width: 32%;
    position: relative;
    text-align: center;
    overflow: scroll;
    overflow-x: hidden;
    z-index: 99999999999;
    box-shadow: 0 20px 10px 0 rgba(0, 0, 0, 0.11);
    transition: .3s;
}

.btnBar div a{
    color: #000;
    text-decoration: none;
    padding: 3px 0;
    min-height: 15px;
    max-height: 15px;
    align-items: center;
    font-size: 10px;
    transition: .3s;
    cursor: pointer;
}

#mode{
    height: 0;
    left:12%;
    overflow-y: hidden;
}

#newLangsBox{
    height: 0;
    left: 55.8%;
}




/* ── Layout ── */
.container {
    max-width: 700px;
    min-width: 320px;
    width: 100%;
    box-shadow: none;

    background: transparent !important;
    border-radius: 16px !important;
}
.container.themeW {
    background: #ffffff !important;
    border-radius: 16px !important;
    /*box-shadow: 0 4px 32px rgba(0,80,200,0.08) !important;*/
}

.iic-theme-btn {
    background: linear-gradient(to top, rgb(51, 157, 255), rgb(55, 232, 245)) !important;
    color: #fff !important;
}
.container.themeB .iic-theme-btn {
    background: linear-gradient(to top, rgb(51, 157, 255), rgb(55, 232, 245)) !important;
    color: #1a1a2e !important;
}




/* ── Header/Footer ── */
#footer-container {
    margin-top:auto;
}

body.themeB #header-container .header-row,
body.themeB #footer-container .footer-row.footer-content,
body.themeB #footer-container .footer-row.footer-info {
    background: linear-gradient(193deg, #0034ff, rgb(3, 166, 252) 48.32%, rgb(3, 165, 252) 74.37%, #001bff) !important;
    border-color: transparent !important;
}

body.themeB #header-container nav a.nav-link { color: #fff; }
body.themeB #header-container nav a.nav-link:hover { background: rgba(255,255,255,0.2); color: #fff; }

body.themeB #header-container #dropdown-header { color: #fff; border-color: rgba(255,255,255,0.3); }
body.themeB #footer-container .footer-text a,
body.themeB #footer-container .brand-link { color: #fff; }

.social-icons a { display: inline-flex; background: #a6a4a4; border-radius: 50%; padding: 5px; width: 10px; height: 10px; align-items: center; justify-content: center; }
.social-icons img { filter: none !important; }
body.themeB .social-icons a { background: transparent; }
body.themeB .social-icons img { filter: none !important; border: 1px solid #ffffff !important; border-radius: 20px !important;}

.footer-join-btn { display: inline-block;  cursor: pointer; border: 1px solid #555; border-radius: 20px; padding: 3px 4px 3px 4px; font-family: "Inter", sans-serif; font-size: 12px; color: #555; text-decoration: none;}
body.themeB .footer-join-btn { border-color: #ffffff; color: #ffffff; }
body.themeB .footer-info p { color: #fff; }

.footer-info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;}

.footer-copy {
    font-size: 11px;
    color: #7d7c7c;
    text-align: center;
    margin: 0;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.footer-links a {
    text-decoration: none;
    color: #7d7c7c;
}


body.themeB {
    background: linear-gradient(193deg, #0034ff, rgb(3, 166, 252) 48.32%, rgb(3, 165, 252) 74.37%, #001bff) !important;
    min-height: 100vh;
}
body.themeB .my_section,
body.themeB .container {
    background: transparent !important;
}
body.themeB #header-container .header-row,
body.themeB #footer-container .footer-row.footer-content,
body.themeB #footer-container .footer-row.footer-info {
    background: transparent !important;
    border-color: transparent !important;
}

body.themeB .iic-floating-label,
body.themeB .eq-name,
body.themeB .eq-total-name,
body.themeB .eq-plus,
body.themeB .eq-equals {
    color: #ffffff !important;
}



/* ── Share Bubble Equation ── */
#shareEqBox {
    padding: 12px 14px 8px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#shareEqRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    width: 100%;
}
.eq-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    animation: bubbleIn 0.3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bubbleIn {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.eq-circle {
    width: 40px; 
    height: 40px;
    border: 1px solid #fbfafa;
    border-radius: 50%;
    background: linear-gradient(to top, #339dff, #37e8f5);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(51,102,255,0.3);
    color: #fff;
    font-weight: 100;
    font-size: clamp(7px, 2.5vw, 13px);
    overflow: hidden;
    text-align: center;
    line-height: 1.2;
    padding: 5px;
}
.eq-name {
    font-size: 8px; 
    font-weight: 100; 
    color: #000000;
    text-align: center;
}
.eq-plus, .eq-equals {
    color: #696969;
    padding-bottom: 16px;

}
.eq-equals { color: #3366ff; font-weight: 500; }
.eq-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.eq-total-circle {
    width: 40px; 
    height: 40px;
    padding: 3px;
    border: 2px solid #fbfafa;
    border-radius: 50%;
    color: #fff;
    font-weight: 100;
    font-size: clamp(7px, 2.5vw, 13px);
    overflow: hidden;
    background: linear-gradient(to top, #339dff, #37e8f5);
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 3px 10px rgba(56,200,160,0.35);
}
.eq-total-name {
    font-size: 8px; 
    font-weight: 100; 
    color: #000000;
    text-align: center;
}
#shareEqSum {
    width: 300px;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    color: #000000;
    text-align: center;
    margin-top: 15px;
    min-height: 14px;
    background: #f0f3fa;
    padding: 5px 12px 5px 12px;
    border-radius: 7px;
}
#shareEqRow:empty::before {
    content: "No heirs selected";
    font-size: 11px; color: #ccc; font-style: italic;
    padding: 10px 0;
}





/* ── Masonry card grid ── */
.calculatorBox {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
    padding: 8px 10px 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: flex-start;
    align-content: flex-start;
}

/* each card */
.main-box.iic-card {
    flex: 1 1 120px;
    min-width: 110px;
    max-width: calc(50% - 4px);
    display: flex !important;
    flex-direction: column;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    height: auto !important;
    position: relative;
}
.main-box.iic-card.iic-card-wide {
    flex: 1 1 120px;
    max-width: calc(50% - 4px);
}
.main-box.iic-card.iic-card-treasury {
    flex: 1 1 120px;
}
.iic-card-treasury, .iic-card-wide {
    flex: 1 1 120px;
}

/* hidden bgChanger compat cells */
.main-box.iic-card .iic-hidden,
.main-box.iic-card .iic-hidden2 {
    width: 0 !important; min-width: 0 !important; max-width: 0 !important;
    height: 0 !important; overflow: hidden !important;
    border: none !important; padding: 0 !important; margin: 0 !important;
    opacity: 0; pointer-events: none; position: absolute;
    flex: none !important;
}
.iic-total-box {
    width: auto !important; height: auto !important;
    position: static !important; opacity: 1 !important;
    display: flex !important; align-items: center; justify-content: center;
    pointer-events: auto !important;
}

/* field group — label above input */
.iic-ctrl-wrap, .iic-treasury-wrap {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.iic-field-group {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 10px;
}
.iic-floating-label {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 300;
    color: #000000;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    white-space: nowrap;
    background: transparent;
    padding: 2px 5px 2px 5px;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}
.iic-card:focus-within .iic-floating-label { color: #0044cc; }

/* the input row: btn — field — btn */
.iic-field {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f0f3fa;
    border: 1px solid rgb(208, 208, 208);
    border-radius: 5px;
    /* padding: 0 4px; */
    height: 35px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.iic-card:hover .iic-field { border-color: #99aaee; }
.iic-field:focus-within {
    border-color: #3366ff;
    box-shadow: 0 0 0 3px rgba(51,102,255,0.12), 0 1px 3px rgba(0,0,0,0.04);
}
.iic-field.iic-field-readonly {
    background: #f0f3fa;
    border-color: #e8ecf8;
    box-shadow: none;
    cursor: default;
    justify-content: center;
}



/* +/- buttons */
.iic-btn {
    display: flex;
    width: 25px;
    height: 25px;
    border-radius: 3px;
    background: rgb(255, 255, 255);
    border: medium;
    margin-right: 5px;
    margin-left: 5px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: rgba(51, 102, 255, 0.3) 0px 2px 6px;
    transition: transform 0.12s, box-shadow 0.12s;
}
.iic-btn span {
    font-size: 35px;
    font-family: "Inter", sans-serif;
    font-weight: 100;
    color: #000000;
    line-height: 1;
}
.iic-btn:hover { transform: scale(1.08); box-shadow: 0 4px 10px rgba(51,102,255,0.4); }
.iic-btn:active { transform: scale(0.92); }

/* custom select wrapper */
.iic-custom-select {
    flex: 1; 
    position: relative; 
    min-width: 0;
    display: flex; 
    align-items: center;
    font-size: 28px;
}
.iic-custom-select select {
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    font-size: 12px;
    opacity: 0; cursor: pointer;
    z-index: 2;
}
.iic-select-options li {
    font-size: 28px; 
    padding: 4px 8px;
}
.iic-custom-select select:focus ~ .iic-select-display .iic-sel-arrow { 
color: #3366ff; 
}
.iic-select-display {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 0 2px;
    pointer-events: none;
    gap: 2px;
}
.iic-sel-val {
    font-size: 12px; font-weight: 500; color: #333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
    text-align: center;
}
.iic-sel-arrow { font-size: 10px; color: #aaa; flex-shrink: 0; }


/* number display */
.iic-num-display {
    flex: 1; display: flex; align-items: center; justify-content: center;
}
.iic-num-input {
    background: transparent !important; 
    border: none !important; 
    outline: none;
    font-family: "Inter", sans-serif;
    font-size: 30px; 
    font-weight: 100; 
    color: #333 !important;
    text-align: center; 
    width: 100%;
    box-shadow: none !important; max-height: 38px !important;
    pointer-events: none;
}
input.allow_pointer.iic-num-input { 
    font-size: 12px;
    font-weight: 300;
    pointer-events: auto !important; 
}
.iic-readonly { 
    color: #888 !important; 
    font-size: 12px; 
    pointer-events: none; 
}

/* grand total */
.iic-grand-total {
    font-size: 15px; font-weight: 800; color: #3366ff;
    text-align: center; display: block; padding: 4px 0;
}

/* amount select wrap (custom value) */
.iic-amount-wrap { position: relative; }
.iic-amount-wrap .w0 { display: none; }
.iic-amount-wrap .w100 { display: flex; }

/* Reset card */
.iic-card-reset {
    align-self: center;
    padding-top: 18px !important;
}
.iic-card-reset .iic-ctrl-wrap {
    display: flex; align-items: center; justify-content: center;
    border: none !important; background: transparent !important; padding: 0 !important;
    height: 100%;
}
.iic-reset-btn {
    display: flex;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    margin-top: 10px;
    background: rgb(240, 243, 250);
    border: 0px solid rgb(208, 208, 208);
    text-align: center;
    place-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 100;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    letter-spacing: 0.5px;
    color: rgb(0, 0, 0) !important;
}
.iic-reset-btn:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(201,24,74,0.45); }
.iic-reset-btn:active { transform: scale(0.96); }



/* Header mode button */
.header-mode-wrap { display: flex; align-items: center; }
.header-mode-btn {
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    border-radius: 20px !important;
    color: inherit !important;
    font-size: 12px; font-weight: 600;
    padding: 4px 10px !important;
    cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    transition: background 0.15s;
}
.header-mode-btn:hover { background: rgba(255,255,255,0.1) !important; }
.header-mode-btn img { filter: brightness(0) invert(1); opacity: 0.7; }
@keyframes segPulse {
    0%,100% { filter:brightness(1); }
    50%      { filter:brightness(1.08); }
}
.prog-seg.has-value { animation: segPulse 3s ease-in-out infinite; }




/* ---------------Header CSS-------------- */
body { margin-top: 0 !important; }
#header-container { position: relative; top: 0; z-index: 1000; width: 100%; min-height:72px; }

#header-container, #header-container header { width: 100%; }
.header-row { 
 display:flex; 
 align-items:center; 
 justify-content:space-between; 
 padding:10px 20px; 
 background:#fff; 
 /*box-shadow:0 2px 8px rgba(0,0,0,0.08); */
 gap:12px; 
 flex-wrap:wrap; 
}
.header-content .logo img { height:36px; width:auto; }
.header-content nav { display:flex; align-items:center; gap:6px; flex:1; justify-content:center; flex-wrap:wrap; }
.header-content nav a.nav-link { text-decoration:none; font-size:11px; font-weight:500; color:#444; padding:6px 12px; border-radius:20px; transition:background 0.15s,color 0.15s; }
.header-content nav a.nav-link:hover, .header-content nav a.nav-link.selected {
    /* background: #e7e3e3; */
    color: #000000;
    font-weight: 700;
    font-size: 13px;

}
#dropdown-header {
    height: 25px;
    text-align: center;
    align-items: center;
    align-content: center;
    font-size: 11px;
    font-weight: 400;
    color: #444;
    border: 1px solid #000000;
    border-radius: 70px;
    padding: 5px 8px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
#dropdown-header:hover { border-color:#3366ff; color:#3366ff; }
#dropdown-options { display:none; position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1.5px solid #dde2f0; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.12); max-height:260px; overflow-y:auto; min-width:140px; z-index:9999; }
.dropdown-options a{
    display: block;
    padding: 10px 1px 5px 10px;
    font-size: inherit !important;
    text-decoration: none;
    color: #333;
    font-size: 11px !important;
    cursor: pointer;
    transition: .7s;
    text-align: center;
}
.dropdown-option {
    display: block;
    text-decoration: none;
    color: inherit;
}

.dropdown-option { font-size:12px; padding:8px 14px; cursor:pointer; color:#333; }
.dropdown-option:hover { background:#ffffff; color:#000000; font-size: 16px; font-weight: 700;}
.header-mode-wrap { display:flex; align-items:center; }
.header-mode-btn { background:transparent!important; border:1.5px solid #dde2f0!important; border-radius:20px!important; color:#444!important; font-size:12px; font-weight:600; padding:5px 10px!important; cursor:pointer; display:flex; align-items:center; gap:4px; }
.header-mode-btn:hover { border-color:#3366ff!important; color:#3366ff!important; }


.footer-row { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:#f7f9ff; flex-wrap:wrap; gap:10px; }
.footer-row footer-info {text-align: center;}
.footer-content .footer-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* display: flex; */
    gap: 16px;
    flex-wrap: wrap;
}
.footer-content .footer-text ul li a { font-family: "Inter", sans-serif; font-size:11px; color:#555; text-decoration:none; }
.footer-content .footer-text ul li a:hover { color:#3366ff; }
.footer-info p { 
    font-family: "Inter", sans-serif;
    font-size:11px; 
    color:#555; 
    text-align: center;
    margin:0; 
}
.footer-text p { 
    font-size:11px; 
    color:#7d7c7c; 
    text-align: center;
    margin:0; 
}
.footer-info .footer-text {
    font-size: 11px;
    color: #7d7c7c;
    text-align: center;
    margin: 0;
}
.brand-link { color:#3366ff; }






/* ---------------About page CSS-------------- */
    :root {
      --g1:#00d935; --g2:#008a20;
      --grad:linear-gradient(135deg,var(--g1),var(--g2));
      --border:#ebebeb; --text:#1c1c1c; --muted:#666; --light:#f6f6f6;
    }
    body { background:#fff; font-family:'DM Sans',sans-serif; color:var(--text); }
 
    .main-content {
      background: #ffffff;
    }

    .about-hero {
      text-align:center; padding:72px 24px 56px; position:relative; overflow:hidden;
    }
    .about-hero::after {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(0,217,53,.07) 0%,transparent 70%);
      pointer-events:none;
    }
    .about-pill {
      display:inline-block; background:var(--grad); color:#fff;
      font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase;
      padding:5px 18px; border-radius:999px; margin-bottom:22px;
    }
    .about-hero h1 {
      font-family:'Playfair Display',serif; font-size:clamp(28px,5vw,50px);
      font-weight:700; line-height:1.18; max-width:640px; margin:0 auto 18px;
    }
    .about-hero h1 em {
      font-style:italic; background:var(--grad);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .about-hero p {
      font-size:16px; color:var(--muted); max-width:500px;
      margin:0 auto; line-height:1.75; font-weight:300;
    }

    .about-wrap { max-width:760px; margin:0 auto; padding:0 24px 100px; }

    .about-section { margin-bottom:48px; }
    .about-section h2, .section-title {
      font-family:'Playfair Display',serif; font-size:24px;
      font-weight:700; margin-bottom:14px; color:var(--text);
    }
    .about-section p, .section-text {
      font-size:15px; line-height:1.8; color:var(--muted);
      font-weight:300; margin-bottom:12px;
    }

    .feature-grid {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
      gap:16px; margin:24px 0;
    }
    .feature-card {
      border:1.5px solid var(--border); border-radius:16px;
      padding:20px; background:var(--light);
      transition:box-shadow .25s,border-color .25s,transform .25s;
    }
    .feature-card:hover {
      box-shadow:0 6px 24px rgba(0,185,44,.12);
      border-color:rgba(0,185,44,.3); transform:translateY(-2px);
    }
    .feature-card .fc-icon { font-size:24px; margin-bottom:10px; }
    .feature-card h3 { font-size:15px; font-weight:500; margin-bottom:6px; color:var(--text); }
    .feature-card p { font-size:13px; color:var(--muted); font-weight:300; margin:0; line-height:1.6; }

    .cta-box {
      background:var(--grad); border-radius:20px; padding:40px 36px;
      text-align:center; color:#fff; margin-top:40px;
    }
    .cta-box h2, .cta-title { font-family:'Playfair Display',serif; font-size:26px; margin-bottom:12px; }
    .cta-box p, .cta-desc { font-size:15px; opacity:.85; margin-bottom:24px; font-weight:300; }
    .cta-btn {
      display:inline-flex; align-items:center; gap:8px;
      padding:12px 28px; background:#fff; color:var(--g2);
      font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500;
      border:none; border-radius:999px; cursor:pointer; text-decoration:none;
      box-shadow:0 4px 20px rgba(0,0,0,.15); transition:transform .2s,opacity .2s;
    }
    .cta-btn:hover { transform:translateY(-2px); opacity:.92; }
 







/* ---------------Learn page CSS-------------- */
    :root {
      --g1: #00d935; --g2: #008a20;
      --grad: linear-gradient(135deg, var(--g1), var(--g2));
      --border: #ebebeb; --text: #1c1c1c; --muted: #666; --light: #f6f6f6; --radius: 18px;
    }
    body { background:#fff; font-family:'DM Sans',sans-serif; color:var(--text); }
    .learn-hero, .learn-wrap { width: 100%; }

    .learn-hero {
      text-align:center; padding:72px 24px 56px; position:relative; overflow:hidden;
    }
    .learn-hero::after {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(0,217,53,.07) 0%,transparent 70%);
      pointer-events:none;
    }
    .learn-hero-pill {
      display:inline-block; background:var(--grad); color:#fff;
      font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase;
      padding:5px 18px; border-radius:999px; margin-bottom:22px;
    }
    .learn-hero h1 {
      font-family:'Playfair Display',serif; font-size:clamp(28px,5vw,50px);
      font-weight:700; line-height:1.18; max-width:640px; margin:0 auto 18px;
    }
    .learn-hero h1 em {
      font-style:italic; background:var(--grad);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .learn-hero p {
      font-size:16px; color:var(--muted); max-width:480px;
      margin:0 auto; line-height:1.75; font-weight:300;
    }

    .learn-wrap { max-width:820px; margin:0 auto; padding:0 24px 100px; }

    .accordion { display:flex; flex-direction:column; gap:12px; }

    .accordion-item {
      border:1.5px solid var(--border); border-radius:var(--radius);
      overflow:hidden; transition:box-shadow .3s,border-color .3s;
    }
    .accordion-item:hover { box-shadow:0 6px 28px rgba(0,0,0,.06); }
    .accordion-item.open {
      border-color:rgba(0,185,44,.35);
      box-shadow:0 8px 32px rgba(0,185,44,.1);
    }

    .accordion-header {
      width:100%; display:flex; align-items:center; justify-content:space-between;
      gap:16px; padding:20px 24px; background:#fff; border:none; cursor:pointer;
      text-align:left; font-family:'DM Sans',sans-serif; font-size:15px;
      font-weight:500; color:var(--text); transition:background .2s;
    }
    .accordion-item.open .accordion-header {
      background:linear-gradient(90deg,rgba(0,217,53,.06),rgba(0,138,32,.03));
    }
    .accordion-header:hover { background:var(--light); }

    .acc-left { display:flex; align-items:center; gap:14px; }

    .acc-icon {
      width:38px; height:38px; border-radius:11px; background:var(--light);
      display:flex; align-items:center; justify-content:center;
      font-size:17px; flex-shrink:0; transition:background .3s;
    }
    .accordion-item.open .acc-icon { background:var(--grad); }

    .chevron {
      width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      font-size:10px; color:var(--muted); flex-shrink:0;
      transition:transform .35s,background .3s,border-color .3s,color .3s;
    }
    .accordion-item.open .chevron {
      transform:rotate(90deg); background:var(--grad);
      border-color:transparent; color:#fff;
    }

    .accordion-body {
      max-height:0; overflow:hidden;
      transition:max-height .45s cubic-bezier(.4,0,.2,1), padding .35s;
      padding:0 24px; background:#fff;
    }
    .accordion-item.open .accordion-body { max-height:1400px; padding:0 24px 26px; }

    .accordion-body p {
      font-size:15px; line-height:1.8; color:var(--muted);
      font-weight:300; margin-bottom:12px;
    }
    .accordion-body p:last-child { margin-bottom:0; }
    .accordion-body h4 {
      font-family:'Playfair Display',serif; font-size:17px;
      font-weight:600; color:var(--text); margin:18px 0 7px;
    }

    .share-table { width:100%; border-collapse:collapse; margin:14px 0; font-size:14px; }
    .share-table th {
      background:var(--light); padding:9px 13px; text-align:left;
      font-weight:500; font-size:11px; text-transform:uppercase;
      letter-spacing:1px; color:var(--muted); border-bottom:1.5px solid var(--border);
    }
    .share-table td { padding:9px 13px; border-bottom:1px solid var(--border); line-height:1.5; }
    .share-table tr:last-child td { border-bottom:none; }
    .share-pill {
      display:inline-block;
      background:linear-gradient(135deg,rgba(0,217,53,.13),rgba(0,138,32,.08));
      color:var(--g2); font-weight:600; font-size:13px;
      padding:2px 10px; border-radius:999px;
    }

    .info-box {
      background:linear-gradient(135deg,rgba(0,217,53,.07),rgba(0,138,32,.04));
      border-left:3px solid var(--g1); border-radius:0 12px 12px 0;
      padding:14px 17px; margin:14px 0; font-size:14px;
      color:var(--text); line-height:1.7;
    }

    .try-btn {
      display:inline-flex; align-items:center; gap:8px; margin-top:16px;
      padding:10px 22px; background:var(--grad); color:#fff;
      font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500;
      border:none; border-radius:999px; cursor:pointer; text-decoration:none;
      transition:opacity .2s,transform .2s;
      box-shadow:0 4px 16px rgba(0,185,44,.25);
    }
    .try-btn:hover { opacity:.88; transform:translateY(-1px); }

    @media(max-width:600px){
      .accordion-header { padding:16px 16px; font-size:14px; }
      .accordion-item.open .accordion-body { padding:0 16px 20px; }
    }



/* ---------------Black Theme CSS-------------- */

.container.themeB{
    border-radius: 0 !important;
}

.container.themeB .calculatorBox{
    padding-left:4%;
    padding-top:26px;
    box-shadow: none;
}

.container.themeB .main-box .box button:hover{
    background-color: #000;
}

.container.themeB .main-box .box select,
.container.themeB .main-box .box input,
.container.themeB .main-box .box input::placeholder {
    color: #000;
}







/* ---------------Auto width  CSS-------------- */

.contract .main-box .box:nth-child(1){
    min-width: 140px;
    max-width: 140px;
}

.contract .main-box .box:nth-child(2){
    min-width: 150px;
    max-width: 150px;
}

.contract .main-box .box:nth-child(3){
    min-width: 80px;
    max-width: 80px;
}

.contract .main-box .box:nth-child(4){
    min-width: 80px;
    max-width: 80px;
}

.expand .main-box .box:nth-child(1){
    min-width: 125px;
    max-width: 125px;
}

.expand .main-box .box:nth-child(2){
    min-width: 190px;
    max-width: 190px;
    letter-spacing: -0.5px;
}

.expand .main-box .box:nth-child(3){
    min-width: 67.5px;
    max-width: 67.5px;
}

.expand .main-box .box:nth-child(4){
    min-width: 67.5px;
    max-width: 67.5px;
}






/* ---------------Languages box CSS-------------- */

body iframe{
    width: 0 !important;
    height: 0 !important;
}

#google_translate_element{
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

#goog-gt-tt{
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.goog-te-gadget{
    font-size: 11px !important;
}

.VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc{
    display: none;
}

.modalContainer{
    background: radial-gradient(rgb(37,34, 243) 38.66%, rgb(0, 225, 214));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modalContainer.beVisible{
    display: flex;
}

.modalContainer.beHidden{
    display: none;
}

.language-box{
    text-align: center;
    min-width: 300px;
    max-width: 300px;
}

.custom-dropdown {
    display: inline-block;
    z-index: 9999;
}

.custom-dropdown p{
    color: #fff;
    font-weight: 100;
    font-size: 15px;
}

.selected-option {
    padding: 14px 0;
    cursor: pointer;
    background: #fff;
    border-radius: 30px;
    font-size: 13px;
    margin-bottom: 2px;
    text-align: center;
    transition: 1s;
}

.btn_box{
    margin-top: 30px;
}

.btn_box button, .alert_box button{
    border: none;
    min-width: 60px;
    max-width: 60px;
    min-height: 40px;
    max-height: 40px;
    border-radius: 10px;
    font-size: 11px !important;
    padding: 10px 0 !important;
    text-transform: none !important;
    margin: 5px !important;
    align-items: center;
    overflow: hidden;
    background-color: #fff;
    cursor:pointer;
    transition: .7s;
}

.show{
    display: block;
}

.hide{
    display: none;
}








/* ---------------Alert Modal CSS-------------- */

.alertContainer{
    background: linear-gradient(193deg,#0034ff, rgb(3,166,252) 48.32%, rgb(3,165,252) 74.37%,#001bff);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 450px;
    min-width: 450px;
    max-height: 450px;
    min-height: 450px;
    border-radius: 10px;
    box-shadow: 0 0 20px -10px #000;
    padding: 50px 20px;
}

.alert_box{
    text-align: center;
    color: #fff;
}

.alert_box button{
    min-width: 120px;
    max-width: 120px;
}

.language-box button:hover, .dropdown-options a:hover, .alert_box button:hover, .btnBar div a:hover{
    color: #fff !important;
    background: #000 !important;
}

input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    appearance: none;
    -moz-appearance: textfield;
}






/* --------------------------------------------- */

span{
    white-space: nowrap;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

p span{
    overflow: hidden;
    display: block;
    text-align: center;
}

.cBox{
    text-align: center;
}

.floating-box {
    position: absolute;
    background-color: #f7f7f7 !important;
    border-radius: 4px;
    color: #000;
    font-size: 12px;
    box-shadow: 0 0 20px -5px #000;
    padding: 5px;
}




/* --------------------------------------------- */

*::-webkit-scrollbar { width: 0; background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; }
* { scrollbar-width: none; }



/* --------------------------------------------- */

.title span, .share_box span{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5px 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #000 !important;
    font-family: 'barlowxmedium', sans-serif;
}

.w100{
    max-width: 90% !important;
}

.w0{
    max-width: 0 !important;
    overflow: hidden;
}

.w0 input, .w0 select{
    border: none !important; 
}



.main-box .box select.w0{
    border: none !important;
}

#c_input{
    min-width: 98%;
}







/*-----------------@media only screen and (max-device-width: 450px)---------*/

@media (max-width: 450px) {

    html {
        overflow-x: hidden;
    }

    body{
        margin-top: 0 !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }


    .my_section{
        flex: none !important;
        display: block !important;
        padding-bottom: 225px !important; /* space for footer */
    }


    main{
        flex: 1;
    }


    #footer-container{
        margin-top: auto;
    }

    .resetBtn{
        min-width: 18%;
    }

    .themeIcon{
        min-width: 45%;
        padding-left: 25px;
    }

    .earthIcon{
        min-width: 45%;
        padding-right: 25px;
    }

    .btnBar{
        min-width: 120%;
        max-width: 120%;
        margin-left: -10%;
    }

    .btnBar div{
        width: 28%;
    }

    #mode{
        left:12%;
        padding: 0 7px;
    }

    #newLangsBox{
        left: 57%;
        padding: 0 7px;
    }

    .circles{
        width: 92%;
        margin-left: 4%;
        padding: 0;
        background-color: transparent !important;
        box-shadow: none;
    }

    .container.themeW .circles{
        box-shadow: none;
    }

    .circles div {
        max-width: 50px;
    }



    .calculatorBox{
        background-color: transparent;
        border-radius: 10px;
        margin-top: 0;
        padding: 0;
    }

    .right_radius{
        border-radius: 5px !important;
    }


    .themeIcon img{
        margin-right: 30px;
    }

    .earthIcon img{
        margin-left: 10px;
    }

    .container, .alertContainer{
        max-height: 492px;
        min-height: 492px;
        max-width: 370px;
        min-width: 370px;
        padding: 10px 0;
    }

    .container.themeB{
        background-image: none;
        background:none;
        max-height: 530px;
        min-height: 530px; 
    }

    .container.themeB .calculatorBox{
        padding-left:0;
        padding-top: 0;
        padding-bottom:0;
    }

    .container.themeW .calculatorBox{
        padding: 0px;
    }

    .calculatorBox{
       background-color: transparent !important;
       box-shadow: none !important;
    }

    .main-box .box {
        font-size: 10px;
    }

    .main-box .box:nth-child(2){
        margin-right: 5px;
    }

    .main-box .box:nth-child(2) div select, .main-box .box:nth-child(2) div input{
        font-size: 10px;
    }

    .contract .main-box .box:nth-child(1){
        min-width: 120px;
        max-width: 120px;
    }

    .contract .main-box .box:nth-child(2){
        min-width: 140px;
        max-width: 140px;
    }

    .contract .main-box .box:nth-child(3){
        min-width: 0;
        max-width: 0;
        overflow: hidden;
    }

    .contract .main-box .box:nth-child(4){
        min-width: 100px;
        max-width: 100px;
    }

    .expand .main-box .box:nth-child(1){
        min-width: 120px;
        max-width: 120px;
    }

    .expand .main-box .box:nth-child(2){
        min-width: 155px;
        max-width: 155px;
    }

    .expand .main-box .box:nth-child(3){
        min-width: 0;
        max-width: 0;
        overflow: hidden;
    }

    .expand .main-box .box:nth-child(4){
        min-width: 85px;
        max-width: 85px;
    }

}