/* raleway */
@font-face {
    font-family: 'Raleway';
    src: url('/static/fonts/Raleway-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900 !important; /* Define weight range for variable font */
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Raleway';
    src: url('/static/fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900 !important; /* Define weight range for variable font */
    font-style: italic;
    font-display: swap;
}

/* source serif */
@font-face {
    font-family: 'Source Serif';
    src: url('/static/fonts/SourceSerif4-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900 !important; /* Define weight range for variable font */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Serif';
    src: url('/static/fonts/SourceSerif4-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900 !important;
    font-style: italic;
    font-display: swap;
}




/* #fbfbfb would be default, general background color, close to white.
#db4d5b is the red colour, this red.
#161616 would be default font color, close to black.
#d9dad9 is the aluminum steel color.
#a0a0a0 used if a non-particular gray color is needed.*/


/* blue color: teal */
/* brown color: #3c280d. used by about esp. */


/* source serif for all? */
/* raleway for "copy to clipboard" and for the alerts */

html, body {
    height: 100%;
    display: flex; /* flex, so for footer */
    flex-direction: column; /* flex, so for footer. */
}

html, body {
    overflow-x: hidden; /* Prevents side scrolling */ /* otherwise, footer at left shows whitespace on scroll to left in some. */
    max-width: 100vw;   /* Ensures nothing exceeds the viewport */
    scrollbar-width: thin;
}

html, body, button {
    font-family: 'Source Serif', Georgia, Book Antiqua, Palatino Linotype, serif;
    font-size: 0.98rem;
    color: #161616;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fbfbfb;
}



/* remove margin that comes by default with p.<br> be used instead. */
p {
    margin: 0;
}


/* Accent-color for all checkboxes and radio Use accent-color for modern browsers */
input[type="checkbox"] {
    accent-color: teal;
}
  
input[type="radio"] {
    accent-color: teal;
}

select {
    display: none !important;
    visibility: hidden !important;
}
select option {
    display: none !important;
    visibility: hidden !important;
} 


/* defaults ended */





/* NAV:: */

/* General styles for the navbar */
.grid-container {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fbfbfb;
    padding: 0.16rem 0.16rem;
    border-bottom: 0.0218rem solid #c9c9c9;
    z-index: 10;
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); */
    height: 3.24rem;
    display: grid;
    grid-template-columns: 14% 35% 15% 32%; /* 5% rem, taken from the last; 5% taken from the second. 1% added to the first. */
    align-items: left; /* Vertically align items */
    gap: 1%;
}

nav {
     margin-bottom: 3.2rem;
}


.logo img {
    height: 2.8rem;
    width: 2.8rem;
    align: center;
    border-radius: 25%;
    margin-top: 0.2rem;
    margin-left: 0.1rem;
    border: 0.0214rem solid #eee;
}

/* First link styles */
.link a {
    display: block;
    text-align: left;
    font-size: 0.54rem;
    margin-top: 1.60rem;
    margin-left: 0.385rem;
    text-decoration: none; /* Remove underline */
    color: #211214;
}

/* Button and below-link group */
.button-link {
    display: flex;
    flex-direction: column; /* Stack button and link vertically */
    align-items: center; /* Center both horizontally */
    justify-content: flex-start; /* Align content to the top */
}

.button-link button {
    font-size: 0.72rem; /* Button font size */
    padding: 0.12rem 0.12rem; /* Adjust padding for the button */
    border: none;
    align-content: right;
    text-align: center;
    cursor: pointer;
    margin-top: 0.611rem; /* At least 25% margin from the top */
    font-weight: 580;
}

.button-link .aN {
    border-radius: 16%;
    background-color: #EAE6E6; /* Button background color */
    color: #288686;    
}

.button-link .bN {
    border-radius: 5%;
    background-color: #288686; /* Button background color */
    color: #fbfbfb;
}



.button-link a {
    font-size: 0.4rem; /* Font size for link below button */
    margin-top: 0.1rem; /* 0.1rem space below button */
    text-decoration: none; /* Remove underline */
    color: #211214; /* Link color */
    text-align: center; /* Center the text */
    align-content: center;
    transition: font-size 0.2s ease;
}
.button-link a:hover {
    font-size: 0.5rem;
}

/* Add hover effects */
.fixed-nav a:hover,
.fixed-nav button:hover {
    opacity: 0.8;
}


/* NAV css COMPLETED;; */


/* body-wrapper default. body-wrapper for main/middle of nav and footer content. */

.body-wrapper {
    flex: 1; /* flex to 1, so footer goes to button regardless of small body-wrapper content. */
    width: 92%;
    margin: 0 auto; /* Center it horizontally */
    padding: 0 2px;
    text-align: left;
    word-break: keep-all;
    /* overflow-y: auto; /* to add scroll bar if content overflows vertically. *//*    this overflow-y is uncomplimentary with footer and flexbox need. */
}

/* body-wrapper default, that up */





/* FOOTER:: */

footer {
    background: linear-gradient(#0b0b0f, #479494fb);
    background-blend-mode: soft-light;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    color: #eee;
    margin: 2.5rem 0 0 0;
    font-weight: 455;
    font-size: 0.63rem;
    padding: 0.7rem 0.35rem 0.13rem 0.35rem;
}

footer a {
    text-decoration: none;
    color: #cfcfcf;
    max-width: max-content;
}

footer button {
    color: #161616;
    font-weight: 455;
    font-size: 0.78rem;
}

footer .subscribe {
    margin-bottom: 0.96rem;
    font-size: 0.74rem;
}

footer .subscribe input {
    background-color: #f0f0f0;
    font-family: 'Source Serif';
    font-style: italic;
    width: 45%;
    max-width: 43.2rem;
    border: 0.084rem solid #a0a0a0;
    border-radius: 0.71rem;
    margin-right: 0.12rem;
    display: inline-block;
}

/* footer .subscribe select {
    /* these are additions to prior, to hide default appearance */
    /* padding: 1.5px 3.5px 0px 3.5px;
    border: 1px solid #ccc;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    /* additions end, below are the priors */
    /* color: #db4d5b;
    background-color: #ffffff10;
    font-family: 'Source Serif';
    font-style: italic;
    width: 30%;
    max-width: 28.8rem;
    border: 0.084rem solid #a0a0a0;
    border-radius: 0.71rem;
    cursor: pointer;
    margin-right: 0.12rem;
} */

footer .subscribe button {
    width: 15%;
    max-width: 14.4rem;
    border: 0.084rem solid #a0a0a0;
    border-radius: 0.6rem;
    margin: 0 0 0 0.22rem;
    cursor: pointer;
}

footer .one, footer .two {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 1.5%;
}

footer .one .oneA, footer .one .remOneB, footer .two .twoA, footer .two .twoB {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.11rem;
}

footer .one button {
    margin-top: 0.4rem;
    margin-bottom: 1.1rem;
    border: none;
    border-radius: 0.25rem;
    background-color: #18181bce;
    color: #fbfbfb;    
    padding: 0.1rem 0.25rem; 
    text-align: center;
    margin-left: 10%;
}

footer .two {
    border-top: 0.04rem dashed #fbfbfb;
    padding-top: 0.2rem;
}
footer .twoA a {
    text-decoration: underline;
    font-style: italic;
    font-weight: 680;
}
footer .three {
    font-size: 0.53rem;
    text-align: center;
    margin: 0 0.3rem;
}
footer .three a {
    padding: 0.13rem;
    color: #fbfbfb;
}

footer .smPic {
    height: 0.88rem;
    width: 0.88rem;
    background-color: #cfcfcf7f;
    border-radius: 0.14rem;
    margin-left: 0.25rem;
    margin-right: 0.75rem;
}


/* Footer's single-select dropdown: on */


/* select primary box covered in its own css, above. */
/*   #category::after {
    content: " ▼"; /* Dropdown Arrow */
    /*float: right;
  } */
  
  /* Hide default dropdown */
  /* #category option {
    display: none;
  }*/
  
  footer .subscribe .cstmSngle {
    color: #adffff;
    background-color: #ffffff10;
    font-family: 'Source Serif';
    font-style: italic;
    width: 30%;
    max-width: 28.8rem;
    border: 0.084rem solid #a0a0a0;
    border-radius: 0.71rem;
    cursor: pointer;
    margin-right: 0.12rem;
    padding: 1.5px 3.5px 0px 3.5px;
    display: inline-block;
  }
  
  /* Floating dropdown box */
  .select-modal {
    display: none;
    position: absolute;
    width: 100%;
    background: #f4f4f4;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    max-height: 15rem; /* Set scrollable height */
    overflow-y: auto;
    padding: 0;
    z-index: 10;
    scrollbar-width: thin;
  }
  
  /* Style for options */
  .select-modal label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
    cursor: pointer;
  }
  
  /* Radio button */
  .select-modal input[type="radio"] {
    margin-left: 2px;
  }
  
  
  /* Accent-color for all checkboxes and radio Use accent-color for modern browsers *//* Already in defaults although, but ok also here */
  input[type="checkbox"] {
    accent-color: teal;
  }
  
  input[type="radio"] {
    accent-color: teal;
  }
    


/* FOOTER css COMPLETED */













/* POSTJOB AND MODIFYJOB */

.phdt {
    font-size: 1.13rem;
    padding: 0.12rem 0.22rem;
    border: none;
    text-align: center;
    margin-top: 2.8rem;
    font-weight: 580;
    border-radius: 0.25rem;
    color: #d9dad9;
    background-color: #286c6c;
    filter: brightness(0.6) opacity(0.8);
    margin-left: 3vw;
    /* max-width: 46vw; */
}

.pfrm form {
    font-size: 0.72rem;
    display: grid;
    place-items: center;
}
.pfrm .oddsevn {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 3%;
    margin-top: 1.5rem;
    min-width: 60%;    
}
/* grid them to two. Gap between. The first should be aligned to the right, and the second should be aligned to the left to give hue of centredness. Did as above instead: centred, min width at 60%, very centred then indeed. */

/*.pfrm form select {
    /* these are additions to prior, to hide default appearance */
    /*padding: 1.5px 3.5px 0px 3.5px;
    border: 1px solid #ccc;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;*/
    /* additions end, below are the priors */ 
    /*border: 0.063rem solid #1D428A8a;
    border-radius: 0.15rem;
    font: 0.65rem 'Source Serif';
    background-color: #d9dad9;
}*/


/*.pfrm form input, .pfrm form input[type="checkbox"] {
    border: 0.063rem solid #1D428A8a;
    border-radius: 0.15rem;
    font: 0.65rem 'Source Serif';
    background-color: #d9dad9;
}*/
.pfrm form input {
    border: 0.063rem solid #1D428A8a;
    border-radius: 0.15rem;
    font: 0.65rem 'Source Serif';
    background-color: #d9dad9;
}
/*.pfrm form select {
    width: 6.5rem;
}*/
.pfrm form input {
    width: 7.3rem;
}
.pfrm form .comment {
    font-size: 0.62rem;
    font-weight: 360;
}
.pfrm form .alert {    
    font-size: 0.58rem;
    color: #db4d5b;
}
.pfrm form .label {
    font-weight: 560;
    margin-bottom: 0.15rem;
}

.pfrm .input2 {
    display: inline-flex;    
    align-items: left;
    text-align: left;
}
.pfrm #logoPreview {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.78rem;
    filter: brightness(0.5) opacity(0.5);
    object-fit: cover;
    margin: 0.08rem 0 0.2rem 0.2rem;
    border: 0.063rem solid #1D428A8a;
}
.prfm .lgprv-container {
    display: flex;
    justify-content: left;
    align-items: center;
}

.pfrm .fbr {
    direction: grid;
    grid-auto-rows: auto;
    margin-bottom: 0.85rem;
}

.pfrm .btlc {
    margin-bottom: 0.2rem;
    margin-top: 0.02rem;
}
.pfrm .lside, .pfrm .lh {
    font-size: 0.68rem;
    font-weight: 480;
}


.pfrm .mmxc {
    display: inline-flex;
    /* grid-template-columns: 33% 33% 34%; */
    flex-direction: row;
}

.pfrm input[type="file"] {
  border: none;
  padding: 0.2rem;
  background-color: #1D428A5c;
  color: #18181b;
  cursor: pointer;
  font-size: 0.65rem;
}
.pfrm input[type="file"]::file-selector-button {
  border: 0.063rem solid #22222234;
  padding: 0.2rem;
  background-color: #286c6c;
  border-radius: 0.2rem;
  color: #f0f0f0;
  cursor: pointer;
  font: 0.65rem 'Source Serif';
}

/* Change border on hover state */
.pfrm input[type="file"]:hover {
  border: 0.063rem solid #0056b3;
}

/* Change border on focus state */
.pfrm input[type="file"]:focus {
  border: 0.063rem solid #0056b3;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}



.pfrm input[type="checkbox"] {
  accent-color: #db4d5bd2; /* changes background during tick */
  outline: 0.14rem solid #1D428A8a;
  width: 1rem;
  height: 1rem;
}
.pfrm input[type="checkbox"]:hover {
    outline: 0.1rem solid #1d428a8a;
}
.pfrm input:checked {
    outline: 0.12rem solid #1d428a8a;
}

 /*  <!-- style for the minmaxcurr, esp the flat focus, no border but bottom-border. -->
   */
  
       
.pfrm .flat-input {
    border: none;
    background-color: #fbfbfb;
    border-bottom: 0.12rem solid #ccc;
    outline: none; /* Remove the outline on focus */
    font-size: 0.62rem;
    width: 90%;
    max-width: 3.1rem;
}

.pfrm .flat-input:focus {
    border-bottom: 0.12rem solid #007bff;
}

/* Optional: Style for labels */
.pfrm .minmaxcurr {
    display: block; /* Make label block to appear above inputs */
    margin-bottom: 0.32rem; /* Space between label and input */
    font-size: 0.64rem;
    font-weight: 460;
}
  

  
/* <!-- style for the WYSIWYG editor, quite quite important. -->
<!-- CUSTOM WYSIWYG the styling --> */
.pfrm .ptdct {
    margin: 3rem auto;
    display: grid;    
}
.pfrm .editor-container {       
    min-width: 43vw;
    margin-left: -3vw;
    max-width: 625px; /* media responsiveness for 620px and above. */
    border: 0.063rem solid #1D428A8a;
    padding: 0.7rem;
    position: relative;
    border-radius: 0.2rem;
    background-color: #1d428a10;    
}


.pfrm .toolbar {
    display: flex;
    place-items: center;
    justify-content: center;
    gap: 0.32rem;
    position: sticky;
    top: 0;
    background-color: #1d428a4a;
    padding: 0.32rem;
    border-bottom: 0.063rem solid #1D428A8a;
    /* z-index: 1; */
    border-radius: 0.1rem;
}
    
/* Title styling */
.pfrm .editor-title {
    font-size: 1rem;
    font-weight: 540;
    margin-bottom: 0.5rem;
    margin-left: -3.1vw;
    
}

.pfrm #editor {
    height: 14rem;
    border: 0.1rem solid #1D428A8a;
    padding: 0.6rem;
    overflow-y: auto;
    outline: none;
    font-size: 0.68rem; /* change the font size of input in the editor */
    border-radius: 0.2rem;        
}
    
  
.pfrm #alert {
    margin-top: 0.6rem;
    padding: 0.32rem;
    font-size: 0.72rem;
    display: none;
    color: #db4d5b;
}
    

.pfrm .toolbar button {
    cursor: pointer;
    padding: 0.32rem;
    border: none;
    background-color: #1d428a06;
    font-size: 0.72rem;
    color: #161616;
    font-family: Arial;
}

.pfrm .toolbar button.active {
    color: #db4d5b;
}

.pfrm #linkOptions {
    display: none;
    position: absolute;
    background: #fbfbfb08;
    border: 0.063rem solid #ccc;
    border-radius: 0.075rem;
    padding: 0.1rem;
    z-index: 20000;
}

.pfrm #linkOptions button {
    margin: 0.32rem;
    padding: 0.1rem 0.32rem;
    font-size: 0.84rem;
    border: 0.1rem solid #16161678;
    border-radius: 0.25rem;
}
  
/* <!-- style for the wysiwyg ends. -->
<!-- CUSTOM WYSIWYG --> */

.pfrm .dwdt {
    text-align: left;
    border-top: 0.07rem solid #db4d5b;
    border-radius: 0.16rem;
    min-width: 60%;
}
.pfrm .wtdw {
    margin-bottom: 0.16rem;
}
.pfrm #sendButton {
    background-color: #161616;
    color: #fbfbfb;
    padding: 0.3rem;
    border: none;
    border-radius: 0.75rem;
    filter: brightness(0.7) opacity(0.9);
    font-family: 'Raleway';
}
.pfrm form .lstf {
    text-align: right;    
    width: 100%;
    margin-right: 3.26rem;
    margin-top: 0.7rem;
}
.pfrm form .page-no {
    font-family: 'Raleway';
    font-size: 0.68rem;
    margin: 0.2rem -0.8rem 0.47rem 0;
}

.pfrm form #entireformsendalert {
    display: none;
    color: #161616;
    text-align: center;
    margin-right: -2.36rem;    
}    





/* The single-select dropdown: on */

/* select primary box covered in their own css, above. */
/*.singleSelects::after {
  content: " ▼"; /* Dropdown Arrow */
  /*float: right;
}*/
  
/* Hide default dropdown */
.singleSelects option {
  display: none;
}
.pfrm form .cstmSngle {
    /* these are additions to prior, to hide default appearance */
    padding: 1.5px 3.5px 0px 3.5px;
    cursor: pointer;
    border: 0.063rem solid #1D428A8a;
    border-radius: 0.15rem;
    font: 0.65rem 'Source Serif';
    background-color: #d9dad9;
    width: 6.5rem;
}
  
/* Floating dropdown box; For all single-select */
.select-modal {
  display: none;
  position: absolute;
  width: 100%;
  background: #f4f4f4; /* set in js although */
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  max-height: 15rem; /* Set scrollable height */
  overflow-y: auto;
  padding: 0;
  z-index: 10;
  scrollbar-width: thin;
}
  
/* Style for options */
.select-modal label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px;
  cursor: pointer;
}
  
/* Radio button */
.select-modal input[type="radio"] {
  margin-left: 2px;
}



/* Multiple-selects dropdown: on */
/* Hide default multiple-select completely*/
.multipSelects {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.multipSelects option {
    display: none;
}

/* replcR select box */
.CustomForMultip {
    cursor: pointer;
    padding: 1.5px 3.5px 0px 3.5px;
    display: inline-block;
    margin-bottom: 0.08rem;
    text-align: left;
    border: 0.063rem solid #1D428A8a;
    border-radius: 0.15rem;
    font: 0.65rem 'Source Serif';
    background-color: #d9dad9;
    width: 6.5rem;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.CustomForMultip::after {
    content: " ▼";
    color: teal;
    float: right;
    margin-top: 0.1rem;
    font: 0.45rem 'Source Serif';
}

/* Floating dropdown box */
.select-modal {
  display: none;
  position: absolute;
  width: 100%;
  background: #f4f4f4;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  max-height: 15rem; /* Set scrollable height */
  overflow-y: auto;
  padding: 0;
  z-index: 10;
  scrollbar-width: thin;
}


/* Style for options */
.select-modal label {
  display: flex;
  justify-content: space-between; /* Moves checkbox to the right */
  align-items: center;
  padding: 4px;
  cursor: pointer;
}

/* Checkbox aligned to the right */
.select-modal input[type="checkbox"] {
  margin-left: 2px;
}





/* For the emailing, start here, etc. */
 /* Container Styles */
  .widget-container {
    background-color: teal;
    color: #fbfbfb;
    max-width: 200px;
    position: fixed;
    right: 10px;
    top: 50%;
    padding: 10px;
    padding-left: 1rem;
    border-radius: 6px;
    overflow-y: auto;
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    max-height: 250px; /* fixed height for scroll */
    overflow-y: auto; /* enables scroll inside */
  }

  /* Tiny scrollbar */
  .widget-container::-webkit-scrollbar {
    width: 4px;
  }
  .widget-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
  }

  .widget-text {
    font-size: 0.65rem;
    line-height: 1.4em;
    margin-bottom: 10px;
  }

  .start-btn {
    display: inline-block;
    background: #fbfbfb;
    color: teal;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 5px;
  }

  .job-form label {
    display: block;
    font-size: 13px;
    margin-top: 8px;
  }

  .job-form input {
    width: calc(100% - 30px);
    padding: 4px;
    font-size: 0.65rem;
    margin-bottom: 5px;
    border: 1px solid #a8a8b1;
    border-radius: 4px;
    font-family: 'Source Serif';
  }

  .link-field {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }

  .link-number {
    display: inline-block;
    width: 0.65rem;
    text-align: right;
    margin-right: 4px;
    font-weight: bold;
  }

  .remove-btn {
    background: none;
    border: none;
    color: #fbfbfb;
    font-size: 0.65rem;
    margin-left: 4px;
    cursor: pointer;
  }

  .small-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    background: #fbfbfb;
    color: teal;
    padding: 4px 6px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 5px;
  }

  .hidden {
    display: none;
  }

.close-bttn {
  position: absolute;
  top: -0.6rem;
  left: 0.1rem;
  font-size: 2rem;
  cursor: pointer;
  color: #0b0b0f;
  font-weight: bold;
  font-style: italic;
}

.floating-start {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #09a2a2;
  color: #fbfbfb;
  font-weight: bold;
  padding: 12px 16px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.hidden {
  display: none;
}
    
/* POSTJOB AND MODIFYJOB css COMPLETED */




























/* media responsiveness here: */


html {
    font-size: 17px; /*3.472222222px; /* Base size for mobile devices (default) */ /* change back to 10px by the way. The 3.4722 is to scale iphonexr:the 288 default emulator. */
}

/* For small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    html {
        font-size: 18px; /* Slightly larger for small tablets and landscape phones */
    }
}


/* For medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    html {
        font-size: 19px; /* Default size for tablets */
    }
}

/* For large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    html {
        font-size: 20px; /* Larger for desktops */
    }
}

/* For extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    html {
        font-size: 21px; /* Largest for extra large screens */
    }
}

/* For extra extra large devices (very large screens, 1600px and up) */
@media (min-width: 1600px) {
    html {
        font-size: 22px; /* Even larger for very large screens */
    }
}


/* responsiveness for editor */
@media (min-width: 620px) {
    .pfrm .editor-container {
        max-width: 55vw; /* Largest for extra large screens */
    }
}

@media (min-width: 720px) {
    .pfrm .editor-container {
        max-width: 45vw; /* Largest for extra large screens */
    }
}