/* ========= 1) Theme tokens ========= */
:root{
  /* surfaces & text */
  --bg:#FAFEFB;
  --surface:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --border:#E5E7EB;

  /* brand */
  --primary:#047005;        /* buttons, accents */
  --primary-hover:#84CC16;  /* hover/active */

  /* misc */
  --radius:12px;
  --shadow:0 6px 20px rgba(2,6,23,.08);


}

/* ========= 2) Base ========= */
*,
*::before,
*::after{ box-sizing:border-box; margin:0;padding: 0;list-style: none; text-decoration: none; }
*,a, li {list-style: none;text-decoration: none;}
html
{ 

  -webkit-text-size-adjust:100%; 

  /* Smooth scroll for hash navigation (fallback if not set elsewhere) */
  scroll-behavior: smooth; 
}
body{
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:#6c757d;
  /*background:#f2f2f2;*/
  background:#E5E1DC;
  line-height:1.5;
}

/* Back-to-top button placed in the markup */
.back-to-top{
  position:fixed; display:none; right:30px; bottom:30px; z-index:99;
}

/* Make container a bit wider on very large screens (keeps Bootstrap’s breakpoints) */
@media (min-width:1350px){
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl{ max-width:1260px; }
}


/* ========= 3) Component overrides (Bootstrap-friendly) ========= */

/* Custom file input label “Browse” button */
.custom-file-label::after{
  content:"Browse";
  /*background:#047005;*/ border-left:1px solid #047005; color:#fff;
  background: #6c757d;
}
.custom-file-input:hover ~ .custom-file-label::after,
.custom-file-input:focus ~ .custom-file-label::after{
  /*background:#84CC16; border-left-color:#84CC16;*/
  background:red; border-left-color:#84CC16;
}

/* Primary button theme (green) */
.btn.btn-primary{
  /*background-color:#047005 !important;
  border-color:#047005 !important;
  color:#fff !important;*/
    /*background:#E5E1DC;*/
    background: #6c757d;
    border-color: #6c757d;
    /*border-color: #E5E1DC;*/
}


.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active{
  /*background-color:#84CC16 !important;
  border-color:#84CC16 !important;
  color:#fff !important;*/
  /*background-color:#C9352E !important;*/
  background: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);
  /*border-color:#C9352E !important;*/
  /*border-color: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);*/
  color:#fff!important;
}

/* Primary button theme (green) */
.btn.btn-secondary{
  /*background-color:#047005 !important;
  border-color:#047005 !important;
  color:#fff !important;*/
    /*background:#E5E1DC;*/
    border-color: #E5E1DC;
    background: #6c757d;
    border-color: #6c757d;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active{
  /*background-color:#84CC16 !important;
  border-color:#84CC16 !important;
  color:#fff !important;*/
  /*background-color:#C9352E !important;*/
  background: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);
  /*border-color:#C9352E !important;*/
  border-color: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);
  color:#fff !important;
}


/* Primary button theme (green) */
.btn.btn-outline-secondary{
  /*background-color:#047005 !important;
  border-color:#047005 !important;*/
  /*color:#fff !important;*/
   /* background:#E5E1DC;
    border-color: #E5E1DC;*/
    background: #6c757d;
    border-color: #6c757d;
    color:#fff !important;
}


.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus,
.btn.btn-outline-secondary:active{
  /*background-color:#84CC16 !important;
  border-color:#84CC16 !important;
  color:#fff !important;*/
  /*background-color:#C9352E !important;*/
  background: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);
  /*border-color:#C9352E !important;*/
  /*border-color: background: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);*/
  
}






.btn.btn-success{
  position: sticky;
  bottom:300px;
  z-index: 1000;
}


.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active{
  /*background-color:#84CC16 !important;
  border-color:#84CC16 !important;
  color:#fff !important;*/
  /*background-color:#C9352E !important;*/
  background: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);
  border-color:#C9352E !important;
  
}


.btn.btn-outline-warning:hover{color:white!important}


/* Dropdown hover in header */
.dropdown a:hover,
.dropdown a:focus,
.dropdown a:active{
  background-color:#84CC16 !important;
  border-color:#84CC16 !important;
  color:#fff !important;
  border-radius:5%;
}

/* Native file input button (Chromium/Edge/Opera) */
input[type="file"]::file-selector-button{
  /*background:#047005 !important;
  border:1px solid #047005 !important;
  color:#fff !important;
  padding:.375rem .75rem; border-radius:.25rem; cursor:pointer;*/
  /*background:#E5E1DC !important;*/
  background: #6c757d;
  border:1px solid #E5E1DC !important;
  color:#fff !important;
  padding:.375rem .75rem; border-radius:.25rem; cursor:pointer;
}
/*input[type="file"]:hover::file-selector-button,
input[type="file"]:focus::file-selector-button{
  background:#84CC16 !important; border-color:#84CC16 !important;*/
    input[type="file"]:hover::file-selector-button,
    input[type="file"]:focus::file-selector-button{
    /*background-color:#C9352E !important; border-color:#C9352E !important;*/
    background: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);
    /*border-color: background: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);*/
}

/* Focus ring color for form controls */
.form-control:focus{
  /*border-color:#84CC16 !important;*/
  border-color:#C9352E !important;
  box-shadow:0 0 0 .2rem rgba(229, 225, 220,.25) !important;
}

/* ========= 4) Social icon buttons ========= */
.btn-outline-secondary{ color:#6c757d; border-color:#6c757d; }
.btn-outline-secondary:hover{ color:#fff; background-color:#6c757d; border-color:#6c757d; }
.btn-outline-secondary:focus,
.btn-outline-secondary.focus{ box-shadow:0 0 0 .2rem rgba(108,117,125,.5); }
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle{
  color:#fff; background-color:#6c757d; border-color:#6c757d;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus{
  box-shadow:0 0 0 .2rem rgba(108,117,125,.5);
}



/* ========= 4) Social icon buttons ========= */

/* social */
/* Primary button theme (green) */
.btn.btn-social{
  /*background-color:#047005 !important;
  border-color:#047005 !important;
  color:#fff !important;*/
   /* background:#E5E1DC;
    border-color: #E5E1DC;*/

}

.btn.btn-social:hover,
.btn.btn-social:focus,
.btn.btn-social:active{
  /*background-color:#84CC16 !important;
  border-color:#84CC16 !important;
  color:#fff !important;*/
  background-color:#C9352E !important;
  border-color:#C9352E !important;
  color:#fff !important;
}




.btn-outline-social{color:#6c757d;border-color:#6c757d; width:38px; height: 38px;box-sizing: border-box;}
.btn-outline-social:hover{ color:#fff; background-color:#6c757d; border-color:#6c757d; }
.btn-outline-social:focus,
.btn-outline-social.focus{ box-shadow:0 0 0 .2rem rgba(108,117,125,.5); }
.btn-outline-social:not(:disabled):not(.disabled):active,
.btn-outline-social:not(:disabled):not(.disabled).active,
.show > .btn-outline-social.dropdown-toggle{
  color:#fff; background-color:#6c757d; border-color:#6c757d;
}
.btn-outline-social:not(:disabled):not(.disabled):active:focus,
.btn-outline-social:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-social.dropdown-toggle:focus{
  box-shadow:0 0 0 .2rem rgba(108,117,125,.5);
}


/* Brand tint on hover based on the icon inside */
a:hover:has(.fa-x-twitter) { background-color:#1DA1F2; border-color:#1DA1F2; }
a:hover:has(.fa-facebook-f)  { background-color:#1877F2; border-color:#1877F2; }
a:hover:has(.fa-linkedin-in) { background-color:#0077B5; border-color:#0077B5; }
a:hover:has(.fa-instagram){
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-color:#E4405F;
}
a:hover:has(.fa-youtube){ background-color:#FF0000; border-color:#FF0000; }

/* ========= 5) Utility blocks you actually use ========= */
.bg-light{ background-color:#ffffff !important; }

/* “Important note” box in footer copy */
.text-important{
  border-left:8px solid #007b83; border-right:8px solid #007b83;
  padding:1rem 1.2rem; background:#fafafa; font-size:1.05rem; line-height:1.6;
  margin:1.5rem 0; color:#333;
}
.text-important strong{ color:#007b83; }
.text-important a{ font-weight:600; color:#007b83; text-decoration:none; }
.text-important a:hover{ text-decoration:underline; }


/* In-page sections are hidden by default */
[id="about"][hidden],
[id="terms"][hidden],
[id="privacy-policy"][hidden]{ 
  display: none !important; 
}




/* ============================================================================
 * PDF PREVIEW GRID — LAYOUT + UI
 * ----------------------------------------------------------------------------
 * Goals
 *  - Mobile: at least 3 thumbnails per row
 *  - md/lg:  4 thumbnails per row
 *  - Keep page labels (blue bar, white text) pinned at the bottom
 *  - Checkbox stays top-right, above the canvas
 *  - No duplicated rules; easy to read and tweak later
 * ==========================================================================*/

/* 1) GRID CONTAINER
   ---------------------------------------------------------------------------
   Use flexbox so items wrap into a responsive grid with a consistent gap.
   (If you already set these elsewhere, you can keep just the gap/margins.)
*/
#previewContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* 2) GRID ITEM (THUMBNAIL CARD)
   ---------------------------------------------------------------------------
   Base = 3 columns on small screens.
   We use flex-basis/max-width instead of fixed widths to keep it fluid.
   NOTE: This overrides your original “8 columns by default” (12.5%).
*/
.previewItem {
  position: relative;
  flex: 0 0 calc(33.333% - 10px);   /* 3 per row on mobile */
  max-width: calc(33.333% - 10px);
}

/* 3) CHECKBOX (TOP-RIGHT)
   ---------------------------------------------------------------------------
   Keep it clickable above the canvas and label.
*/
.previewItem input[type="checkbox"] {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;   /* on top of everything inside the card */
  width: 18px;
  height: 18px;
}

/* 4) THUMBNAIL WRAPPER + CANVAS
   ---------------------------------------------------------------------------
   The wrapper gives us rounded corners and a clipping context for the label.
*/
.thumbWrap {
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.previewItem canvas {
  display: block;
  width: 100%;
  height: auto;   /* preserve aspect ratio */
  /* optional: smooth edges on some browsers
     image-rendering: -webkit-optimize-contrast; */
}

/* 5) PAGE LABEL (BLUE BAR)
   ---------------------------------------------------------------------------
   Pinned to the bottom of the thumbnail, full width.
   Sits above the canvas but below the checkbox.
*/
.pageBar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  background: #0d6efd;      /* Bootstrap primary */
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  padding: 2px 4px;

  z-index: 5;               /* above canvas, below checkbox */
  pointer-events: none;     /* don’t block clicks on the canvas/checkbox */

  /* match the card radius on the bottom edge */
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  /* optional: subtle text glow for busy pages */
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* 6) RESPONSIVE COLUMNS
   ---------------------------------------------------------------------------
   md (≥768px): 4 columns
   lg (≥992px): keep 4 columns (explicit for readability)
*/
@media (min-width: 768px) {
  .previewItem {
    flex: 0 0 calc(25% - 10px);  /* 4 per row */
    max-width: calc(25% - 10px);
  }
}

@media (min-width: 992px) {
  .previewItem {
    flex: 0 0 calc(25% - 10px);  /* still 4 per row */
    max-width: calc(25% - 10px);
  }
}

/* 7) SMALL-SCREEN TYPOGRAPHY TWEAKS (optional)
   ---------------------------------------------------------------------------
   Slightly smaller label text on very small devices for readability.
*/
@media (max-width: 474px)
{
  .pageBar 
  {
    font-size: 11px;
    padding: 1px 1px;
  }
  
  .btn-outline-social
  {
    height:28px;width: 28px;padding:0;
  }

  i
  {
    font-size: 1.5rem;
  }
  
  img
  {
    width:17rem;height: auto;
  }
  
  .about-img{width:3rem; height:auto;}
  

  .last{display: inline-flex;}

  .imgLast
  {
    width:11rem!important;height: auto;margin-left: 22px;margin-right: 16px;
  }
  
  .copy-right-left
  {
    font-size: 3rem;
    margin-right: -3rem;
  }

  .copy-right-right
  {
    font-size: 1rem;
    margin-right: -1rem;
  }

  .container, .row, .col-12
  {
    justify-content: center;
     font-size: 14px;
    padding-left:1px;
    margin-left: 1px;
  }
}

/* XS only (<=575.98px) */
@media (max-width: 575.98px) 
{
  .pageBar 
  {
    font-size: 11px;
    padding: 2px 3px;
  }

  /* Center header content */
  header.container .row .col-12 
  {
    display: flex;
    justify-content: center;
    /* align-items: center; */
  }
  /* If there's a single wrapper inside the column */
  header.container .row .col-12 > div 
  {
    display: flex;
    justify-content: center;
  }
}

/* SM only (>=576px and <=767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) 
{
  header.container .row .col-12 
  {
    display: flex;
    justify-content: center;
    /* align-items: center; */
  }
  header.container .row .col-12 > div 
  {
    display: flex;
    justify-content: center;
  }

}



/* ============================================================================
 * PDF PREVIEW GRID — LAYOUT + UI
 * ----------------------------------------------------------------------------
 * Goals
 *  - Mobile: at least 3 thumbnails per row
 *  - md/lg:  4 thumbnails per row
 *  - Keep page labels (blue bar, white text) pinned at the bottom
 *  - Checkbox stays top-right, above the canvas
 *  - No duplicated rules; easy to read and tweak later
 * ==========================================================================*/

/* 1) GRID CONTAINER
   ---------------------------------------------------------------------------
   Use flexbox so items wrap into a responsive grid with a consistent gap.
   (If you already set these elsewhere, you can keep just the gap/margins.)
*/
#previewContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* 2) GRID ITEM (THUMBNAIL CARD)
   ---------------------------------------------------------------------------
   Base = 3 columns on small screens.
   We use flex-basis/max-width instead of fixed widths to keep it fluid.
   NOTE: This overrides your original “8 columns by default” (12.5%).
*/
.previewItem {
  position: relative;
  flex: 0 0 calc(33.333% - 10px);   /* 3 per row on mobile */
  max-width: calc(33.333% - 10px);
}

/* 3) CHECKBOX (TOP-RIGHT)
   ---------------------------------------------------------------------------
   Keep it clickable above the canvas and label.
*/
.previewItem input[type="checkbox"] {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;   /* on top of everything inside the card */
  width: 18px;
  height: 18px;
}

/* 4) THUMBNAIL WRAPPER + CANVAS
   ---------------------------------------------------------------------------
   The wrapper gives us rounded corners and a clipping context for the label.
*/
.thumbWrap {
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.previewItem canvas {
  display: block;
  width: 100%;
  height: auto;   /* preserve aspect ratio */
  /* optional: smooth edges on some browsers
     image-rendering: -webkit-optimize-contrast; */
}

/* 5) PAGE LABEL (BLUE BAR)
   ---------------------------------------------------------------------------
   Pinned to the bottom of the thumbnail, full width.
   Sits above the canvas but below the checkbox.
*/
.pageBar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  background: #0d6efd;      /* Bootstrap primary */
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  padding: 2px 4px;

  z-index: 5;               /* above canvas, below checkbox */
  pointer-events: none;     /* don’t block clicks on the canvas/checkbox */

  /* match the card radius on the bottom edge */
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  /* optional: subtle text glow for busy pages */
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* 6) RESPONSIVE COLUMNS
   ---------------------------------------------------------------------------
   md (≥768px): 4 columns
   lg (≥992px): keep 4 columns (explicit for readability)
*/
@media (min-width: 768px) {
  .previewItem {
    flex: 0 0 calc(25% - 10px);  /* 4 per row */
    max-width: calc(25% - 10px);
  }
}

@media (min-width: 992px) {
  .previewItem {
    flex: 0 0 calc(25% - 10px);  /* still 4 per row */
    max-width: calc(25% - 10px);
  }
}

/* 7) SMALL-SCREEN TYPOGRAPHY TWEAKS (optional)
   ---------------------------------------------------------------------------
   Slightly smaller label text on very small devices for readability.
*/
@media (max-width: 575.98px) {
  .pageBar {
    font-size: 11px;
    padding: 2px 3px;
  }
}

.alert-danger
{padding:10px;line-height: 20px;border:none;color:#C9352E}

.alert-danger:hover,
.alert-danger:focus,
.alert-danger:active
/*{background:#C9352E;color:#fff}*/
{background: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%); color: "white"}

/* allow \n to render as real line breaks inside Bootstrap tooltip */
.tooltip-inner { white-space: pre-line;}

/* show it's explainable on hover/focus */
.alert-danger[data-toggle="tooltip"] { cursor: help; }

/* keep an accessible focus outline */
.alert-danger:focus { outline: 2px linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);; outline-offset: 1px; }






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

                                                      footer links 

  Option A — Modern, clean (uses :has() so icon + label light up together)


*/

/*i:hover,.fa-angle-right:hover{background:linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%); color:white!important}*/
/*a:hover:has(.fa-angle-right), span:hover { background:linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%); color:white!important }*/

/* Scope to your links only */
.footer-link { text-decoration: none; }

/* Smoothen */
.footer-link .icon,
.footer-link .label { transition: color .2s, background .2s; }

/* When hovering either the icon OR the label, style both */
.footer-link:has(.icon:hover),
.footer-link:has(.label:hover) {
  text-decoration: none;
}

.footer-link:has(.icon:hover) .icon,
.footer-link:has(.icon:hover) .label,
.footer-link:has(.label:hover) .icon,
.footer-link:has(.label:hover) .label {
  background: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);
  color: #fff !important;
}

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

  Option B — Max compatibility (no :has())

  If don’t want to rely on :has(), you can style each element only when it itself is hovered:

  This won’t highlight the pair together—only the hovered child—but avoids :has().

*/

/*.footer-link { text-decoration: none; }
.footer-link .icon,
.footer-link .label { transition: color .2s, background .2s; }*/

/* Only the hovered element changes (icon or label) */
/*.footer-link .icon:hover,
.footer-link .label:hover {
  background: linear-gradient(90deg, #F45A3C 10%, #F46E4E 40%, #00A6A6 100%);
  color: #fff !important;*/
/*}*/

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





/* my article*/

.my-article-ul 
{
  margin-left:1.5rem;
}


.my-article-ul li
{
  /*margin-left: 1rem;
  font-size: 17px;
  list-style: initial;
  list-style-position: inside;
  background-color: yellow;
  line-height: 1.2;*/
  position: relative;
  padding-left: 2rem;
  line-height: 1.7; /* match page’s normal line spacing */
}
/*.my-article-ul li::marker
{
  
  font-size: 1.5rem;
  vertical-align: middle;
}*/

 .my-article-ul li::before 
{
  content: "•"; /* or a custom symbol */
  font-size: 3rem;
  position: absolute;
  left: 0;
  top: 0; /* tweak until visually aligned */
  line-height: .59; /* avoids affecting overall spacing */
}

.my-article-ul .right::before 
{
    content: "✅ ";
    font-size: 1rem;
    line-height: 1.6;
 /* or a custom symbol */
}
.my-article-ul .wrong::before 
{
    content: "❌ "; /* or a custom symbol */
    font-size: 1rem;
    line-height: 1.5;
}

.my-article-ul li a {color:grey}

.my-article-ul li a:hover{background:grey; color:white; border-radius: 2px;}