@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    line-height: 24px;
    font-weight: 400;
    color: #282828;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

p, label, td, li {
    font-family: "Roboto", sans-serif;
    color: #000;
    font-size: 17px;
    
}

a {
    text-decoration: none !important;
    color: #000;
    font-size: 1rem;
    font-family: "Roboto", sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

/* Layout */

a:hover {
    text-decoration: none;
    cursor: pointer;
}

h1 {
    font-size: 2.3rem;
    margin: 1.25rem 0 1.56rem;
    font-weight: 400;
}

h2 {
    font-size: 1.9rem;
    margin: 1.25rem 0 1.56rem;
    font-weight: 400;
}

h3 {
    font-size: 1.7rem;
    margin: 1.25rem 0 1.56rem;
    font-weight: 400;
    line-height: 140%;
}

h4 {
    font-size: 1.3rem;
    margin: 1.56rem 0 1.56rem;
    font-weight: 400;
    line-height: 140%;
}

p {
    line-height: 24px;
    margin: 0 0 10px !important;
    
}
.fModuleTitle h3 {
    font-weight: 700;
    font-style: normal;
    color: #282828;
    font-size: 40px;
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    position: relative;
}
.fModuleTitle h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 3px;
  width: 0;
  background: linear-gradient(
    90deg,
    transparent,
    #8d5f52,
    transparent
  );
  transform: translateX(-50%);
  border-radius: 2px;
  animation: sparkLine 2s ease-in-out infinite;

}
@keyframes sparkLine {
  0% {
    width: 0;
    opacity: 0.2;
  }
  100% {
    width: 50%;
    opacity: 0.6;
  }
}

.fModuleTitle h3.animate::after {
  width: 100%;
}
img {
    max-width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.fPaid  .bx-wrapper .bx-viewport {
  background: transparent !important;
}
ol,
ul {
    margin: 0em 0 1rem;
    padding: 0 0 0 1em;
    color: #666;
}
ul,
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fButton,
.buttons input[type="submit"]{
  padding: 18px 35px !important;
  display: inline-block;
  font-weight: 500;
  color: #fff;
  background-color: #8d5f52;
  border: 1px solid #8d5f52;
  z-index: 1;
  line-height: 15px;
    letter-spacing: 0px;
    font-weight: 500;
    font-size: 15px;
    border-color: transparent;
    padding: 18px 35px;
    border-radius: 30px;
  transition: .5s all ease;
  text-decoration: none;
  position: relative;
}
.fBigButton.fButton {
  padding: 10px 30px !important;
  border-radius: 35px;
  font-size: 28px;
  margin: 50px 0 0;
}
.fButton:hover,
.buttons input[type="submimt"]:hover {
  background-color: transparent;
  color: #000;
}
.buttons a {
  display: none;
}
/*Module*/

.fModule .fModuleTitle,
.fModule .fModuleContent {
    width: 100%;
}

.fModuleEnd .fModuleTitle,
.fModuleEnd .fModuleContent,
.fModuleBoxed {
    margin: 0 auto;
}

#fMatter .fModule,
#fSidebarRight .fModule,
#fContentPre .fModule,
#fContentPost .fModule {
   padding-top: 1rem;
   padding-bottom: 1rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
    overflow: hidden;
}
.body .fModule,
body.container-wrap .body .wrap {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.fRegion {
    display: inline-block;
    width: 100%;
}
.fGalleryImage {
  display: inline-block;
}
header ul, ul.fMenu, header ul li, ul.fMenu li {
    margin: 10px;
    list-style: none;
    padding: 0px;
}

/* Common CSS */

input.form-control,
textarea.form-control {
    display: inline-block;
    margin: 10px 0px;
}
.title-off .page-title{
    display: none;
}
.region-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h3 a {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
}



/* customizing .wrap as bootstrap container */
@media (min-width: 576px) {
  .wrap {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .wrap {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .wrap {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .wrap {
    max-width: 1140px;
  }
}
header .wrap {
  overflow: visible;
}
form {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
//  border: 1px solid #a27c1f;
  border-radius: 8px;
  padding: 15px;
  background: rgba(255,255,255,0.4);
}
#fModule-47957 {
  margin: 130px auto;
}
header {
  padding: 10px 0;
}
.fForm legend,
form .form-heading-legend {
  color: #a27c1f;
  font-size: 1.25rem;
//  margin: 1.5rem 0 1rem 0;
  border-bottom: 1px solid #a27c1f;
  color: #a27c1f;
  font-size: 1.25rem;
  padding-left: 0;
  font-family: "Roboto", sans-serif;
}
form .form-heading-legend {
  font-weight: bold;
  padding: 0px 1rem 0 0;
  margin-top: 0;
}
.fForm .form-heading {
  border-bottom: none !important;
}
.fForm fieldset {
  border-top: none;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.fForm label {
  width: 100%;
  text-align: left;
  display: block;
  float: none;
  margin-right: 10px;
  padding: 0.25rem 0px;
  color: #000;
  font-family: "Roboto", sans-serif;
}
form input,
form select,
form textarea {
  width: 100% !important;
  height: 42px;
  border-radius: 8px;
  border-color: #eee;
  padding: 0 10px !important;
  background: #fff;
  font-family: "Roboto", sans-serif;
}
form input[type="radio"],
form input[type="checkbox"],
form input[type="submit"] {
  width: auto !important;
  height: auto;
  position: relative !important;
  margin-left: 0 !important;
}
form fieldset {
  border-top: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.fForm .buttons {
  padding-left: 0 !important;
  text-align: right;
}
.fForm .buttons input {
  margin-right: 0 !important;
}
.path-register- form fieldset:first-child {
  display: none;
}
.fForm .hint, .fForm .error {
  margin-left: 0;
}
.fForm .hint a, .fForm .error a {
  color: #000;
}
.iti {
  width: 100%;
}
.iti input {
  padding-left: 86px !important;
}
#form-item-field_id_24284 {
  overflow: visible !important;
}

header .wrap,
footer .wrap {
  max-width: 100% !important;
}
.full-wrap p,
.full-wrap a,
.full-wrap span,
.full-wrap li {
}
.body .fModule.fBanner {
  padding-top: 0;
  padding-bottom: 0;
}
/* header {
  position: sticky;
  margin: 0 auto;
  z-index: 999;
  background: #fff;
  top: 0;
  padding: 10px;
  transition: 0.6s all;
}
.float-header header {
  position: fixed;
  width: 95%;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}
.fMainMenu .fMenu li {
  position: relative;
}
.fMainMenu .fMenu li:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 20px;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  background: #ad8428;
}
.fMainMenu .fMenu li:last-child:after {
  display: none;
}
.fMainMenu .fMenu li a {
    color: #282828;
    font-weight: 600;
    padding: 10px 25px;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
} */
.fCustomHeading .fModuleTitle h3 {
  display: inline-block;
  padding: 0 20px;
  background: #fff;
  color: #ad8428;
  text-transform: uppercase;
}
.fCustomHeading .fModuleTitle {
  position: relative;
}
.fCustomHeading .fModuleTitle:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #ad8428;
  z-index: -1;
}
footer{
  background: #2D2D2D;
  padding-top: 51px;
  padding-bottom: 49px;
}
footer .wrap {
  overflow: visible;
}
footer h3,
footer p,
footer li,
footer a {
  color: #fff;
}
footer .row {
  justify-content: space-between;
}
footer .logo {
  position: relative;
  background: #fff;
  display: inline-block;
  padding: 15px 15px 15px 0;
}
footer .logo img {
  max-height: 60px;
}
footer .logo:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -131px;
  right: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
footer .content {
  margin-top: 30px;
}
footer .content p {
  font-size: 1rem;
  margin: 1.5rem 0;
}
.fFooterHead .fModuleTitle h3 {
    letter-spacing: 0.5px;
    font-size: 16px;
    color: #FFFFFF;
    text-transform: capitalize;
    font-weight: bold;
    position: relative;
    padding-bottom: 20px;
    margin-top: 9px;
    position: relative;
    text-align: left;
}
.fFooterHead .fModuleTitle h3:after {
    width: 20px;
    height: 2px;
    background: #80bb01;
    content: "";
    position: absolute;
    left: 0;
    top: 32px;
    transform: translateX(0);
}
.fFoterContent p,
.fFoterContent a {
    font-family: "Roboto", sans-serif;
    line-height: 24px;
    font-weight: 400;
    color: #fff;
    font-size: 14px;
} 
.fContact p {
    display: flex;
    align-items: center;
    gap: 5px;
}
.fContact p img {
    max-height: 15px;
    filter: brightness(0) invert(1);
}
.social {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}
.social img {
  max-height: 30px;
}
.fForm .form-item-option {
  margin: 0;
}
.fForm .form-item-option label {
  padding-left: 0 !important;
}
.fForm .form-item-option label input {
  margin-right: 8px;
}
.page-message {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
#f-messages .item {
  background-color: #b18620 !important;
  max-width: 600px;
  margin: 0 auto;
}
.path-user-profile- form .row {
  margin: 0;
}
.bx-wrapper {
  margin-bottom: 0 !important;
}

.page-message .info {
  position: relative;
}
.page-message .info a {
  position: absolute;
  top: 50%;
  right: 10px;
  display: inline-block;
  transform: translateY(-50%);
}
.page-message .info a img {
  max-height: 30px;
}

/************************************************/
                /*Customization*/
/************************************************/
#nav-up {
    display: none !important;
}
.fLogo  img {
    max-height: 100px;
}
.no-title .fPageTitle {
    display: none;
}
.fPageTitle {
    padding: 50px 0;
    text-align: center;
    background-image: url(https://storage.unitedwebnetwork.com/files/1337/55004159c52d351924ef98f4d2ff6bda.png);
    background-repeat: no-repeat;
    background-size: cover;
}
#form-item-field_id_34974 {
  opacity: 0;
}
.form-item-type-checkbox > label {
  font-weight: bold;
}
.intl-tel-input {
  width: 100%;
}
.intl-tel-input input {
  padding-left: 84px !important;
}
@media (max-width: 450px) {
  .float-header header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: translateX(0) !important;
    width: 100% !important;
  }
  .navbar-toggle span {
    width: 24px;
    height: 3px;
    background: #ad8428;
    margin-bottom: 3px;
    display: block;
  }
  footer .wrap {
    padding: 30px 0;
  }
  .footerContent {
    margin-bottom: 20px;
  }
  form {
    max-width: 600px;
  }
  .navbar-toggle {
    display: inline-block;
  }
  .fMainMenu nav {
    position: absolute;
    top: 100%;
    right: 0;
    width: 250px;
    background: #fff;
    z-index: 999;
  }
  .fMainMenu .fMenu {
    display: block;
  }
  .float-header .fMainMenu .fMenu li::after {
    display: none;
  }
}

/* =====================================
   FORM STYLING & ANIMATIONS BY CHERAG
   ===================================== */

/* Fade-in effect for form */
form.fForm {
  animation: fadeSlideUp 0.5s ease-in-out;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section headings */
.form-heading-legend {
  color: #a27c1f;
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 4px;   /* reduced top space */
  margin-bottom: 6px;/* reduced bottom space */
  border-bottom: 1px solid #a27c1f; /* thin line */
  padding: 0;
}

/* Labels */
.fForm label {
  display: block;
  margin-bottom: 3px; /* reduced space before input */
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* Inputs, selects, textareas */
form input,
form select,
form textarea {
  width: 100% !important;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  padding: 6px 2px;
  margin-bottom: 12px; /* less space below fields */
  font-size: 15px;
  background: transparent;
  transition: all 0.3s ease;
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-bottom: 1px solid #a27c1f;
  box-shadow: 0 2px 6px -2px rgba(162,124,31,0.5);
  animation: glowPulse 0.8s ease-in-out;
}
@keyframes glowPulse {
  0% { box-shadow: 0 2px 6px -2px rgba(162,124,31,0.0); }
  50% { box-shadow: 0 2px 8px -2px rgba(162,124,31,0.6); }
  100% { box-shadow: 0 2px 6px -2px rgba(162,124,31,0.0); }
}

/* Descriptions (hint text) */
.fForm .hint {
  margin-top: 2px;   /* reduced space */
  margin-bottom: 8px;
  font-size: 12px;
  color: #666;
}

/* Error state with shake */
.fForm input.error,
.fForm select.error,
.fForm textarea.error {
  border-bottom: 1px solid #d9534f !important;
  animation: shake 0.3s linear;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-4px); }
  40%,80% { transform: translateX(4px); }
}
.fForm .error-message {
  font-size: 12px;
  color: #d9534f;
  margin-top: -6px;
  margin-bottom: 8px;
}

/* Checkbox & radio options */
.fForm .form-item-option {
  margin: 4px 0; /* tighter spacing */
}
.fForm .form-item-option label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

/* Custom checkboxes */
.fForm input[type="checkbox"],
.fForm input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #a27c1f;
  border-radius: 3px;
  background: #fff;
  position: relative;
  cursor: pointer;
  transition: all 0.25s ease;
}

.fForm input[type="checkbox"]:checked {
  background: #a27c1f;
  border-color: #a27c1f;
  transform: scale(1.1);
  animation: bounce 0.2s ease;
}
.fForm input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  position: absolute;
  top: -1px;
  left: 3px;
}

/* Radios */
.fForm input[type="radio"] {
  border-radius: 50%;
}
.fForm input[type="radio"]:checked {
  background: #a27c1f;
  transform: scale(1.1);
  animation: bounce 0.2s ease;
}
.fForm input[type="radio"]:checked::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
}

/* Bounce animation */
@keyframes bounce {
  0% { transform: scale(0.85); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Buttons */
.fButton,
.buttons input[type="submit"] {
  padding: 12px 28px !important;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: #355E3B;
  border: 1px solid #355E3B;
  border: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.fButton:hover,
.buttons input[type="submit"]:hover {
  background: #026132;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(162,124,31,0.4);
  color: #fff;
}
.fMenu li:hover ul {
  display: inherit;
}
.iconset .fMenu li:hover ul {
  display: block;
}
.user-register-group-radio label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.user-register-group-radio input[type="radio"],
.invoice-pmodes input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 23px;
  border: 2px solid #ccc;
  border-top-color: rgb(204, 204, 204);
  border-right-color: rgb(204, 204, 204);
  border-bottom-color: rgb(204, 204, 204);
  border-left-color: rgb(204, 204, 204);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
  position: relative !important;
}
.fForm input[type="radio"]:checked {
  background: transparent;
}
.user-register-group-radio input[type="radio"]:checked,
.invoice-pmodes input[type="radio"]:checked {
  border-color: #409c47;
}
.user-register-group-radio input[type="radio"]:checked::after,
.invoice-pmodes input[type="radio"]:checked::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #409c47;
  border-radius: 50%;
  position: absolute;
  top: 17%;
  left: 17%;
}
.user-register-group-radio .form-item-type-text {
  margin-top: 20px;
}
/* ===============================
   MOBILE RESPONSIVE ADJUSTMENTS
   For: http://afsta.experiencesense.com
   =============================== */
  body.view-invoice #fMatter {
    margin-top: 30px;
  }
body.view-invoice #invoicePrint body  {
  font-family: Arial;
}
/* GENERAL RESET */
@media (max-width: 768px) {

  html {
    font-size: 15px;
  }

  body {
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5 {
    line-height: 1.3;
  }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.3rem; }
  h4 { font-size: 1.1rem; }

  p, li, td, label {
    font-size: 0.95rem;
  }

  .wrap {
    padding: 0 15px;
    max-width: 100% !important;
  }

  img {
    height: auto;
    max-width: 100%;
  }

  /* HEADER */
  header {
    padding: 10px 0;
    position: relative;
  }

  .region-header {
    /* flex-direction: column; */
    align-items: center;
    gap: 12px;
  }

  .fLogo img {
    max-height: 70px;
  }

  /* NAVIGATION MENU */
  .navbar-toggle {
    display: block;
    cursor: pointer;
    background: transparent;
    border: none;
  }

  .navbar-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: #8d5f52;
    margin: 5px 0;
    transition: 0.3s;
  }

  .fMainMenu nav {
    position: absolute;
    background: #fff;
    padding: 10px 0;
    width: 250px;
    top: 100%;
    right: 0;
  }

  .fMainMenu .fMenu {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }

  .fMainMenu .fMenu li {
    display: block;
    text-align: left;
    padding: 0 !important;
  }

  .fMainMenu .fMenu li a {
    display: block;
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
  }

  .fMainMenu.active .fMenu {
    display: flex;
  }

  /* FOOTER */
  footer {
    padding: 30px 15px;
    text-align: center;
  }

  footer .row {
    flex-direction: column;
    align-items: center;
  }

  footer .logo {
    padding: 10px;
    margin-bottom: 20px;
  }

  footer .content {
    margin-top: 10px;
  }

  footer .content p {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .social {
    justify-content: center;
    margin-top: 15px;
  }

  /* BUTTONS */
  .fButton, 
  .buttons input[type="submit"] {
    width: 100%;
    text-align: center;
    padding: 14px !important;
    font-size: 16px;
  }

  /* FORMS */
  form {
    padding: 15px;
    background: rgba(255,255,255,0.9);
    border-radius: 6px;
  }

  form input,
  form select,
  form textarea {
    font-size: 14px;
    height: auto;
    padding: 8px 6px !important;
  }

  .fForm .buttons {
    text-align: center;
  }

  /* SECTION HEADINGS */
  .fModuleTitle h3 {
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
  }

  .fCustomHeading .fModuleTitle h3 {
    font-size: 18px;
  }

  /* LAYOUTS */
  .fModule {
    padding: 1.2rem 0;
  }

  .fRegion,
  .fModuleContent {
    width: 100%;
  }

  /* GALLERIES / IMAGES */
  .fGalleryImage {
    width: 100%;
    display: block;
  }

  /* FOOTER LINKS STACKING */
  .fFooterHead .fModuleTitle h3 {
    font-size: 15px;
    /* text-align: center; */
  }

  .fFoterContent p,
  .fFoterContent a {
    font-size: 13px;
    text-align: left !important;
  }

  /* PAGE TITLE */
  .fPageTitle {
    padding: 30px 0;
    background-position: center;
    background-size: cover;
  }
  .fBanner .fGalleryText h3 {
    line-height: normal !important;
    font-size: 20px !important;
  }
  .fBenefit li {
    flex-direction: column !important;
  }
  .fGrid .d-flex,
  .fServe .d-flex {
    flex-direction: column !important;
  }
  .fFoterContent li {
    text-align: left;
  }
}

/* SMALLER PHONES (≤480px) */
@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }

  .fLogo img {
    max-height: 60px;
  }

  footer {
    padding: 20px 10px;
  }

  .fButton {
    font-size: 14px;
    padding: 10px 18px !important;
  }

  form {
    padding: 10px;
  }

  .social img {
    max-height: 22px;
  }
  #fModule-61006 {
    position: absolute;
  top: 3%;
  opacity: 0;
  }
  .fMainMenu .fMenu ul li ul {
    left: 0 !important;
  }
}
/* ===============================
   Header Logo Size - Final Version
   =============================== */

.fLogo img {
    height: 52px !important;
    width: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* Keep header vertically balanced */
.region-header {
    min-height: 95px !important;
    align-items: center !important;
}

/* Tablet */
@media (max-width: 768px) {
  .fLogo img {
    height: 44px !important;
    width: auto !important;
    max-height: none !important;
  }

  .region-header {
    min-height: 80px !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .fLogo img {
    height: 38px !important;
    width: auto !important;
    max-height: none !important;
  }

  .region-header {
    min-height: 68px !important;
  }
}
/* Scoped to body.view-pg-cod-default — the fPHP view class for this page
   TEMPLATE, not the specific reference number (163615 is baked into other
   body classes like .path-financial-pg-cod-163615-, which would only match
   this one reference). Using the template class means every future bank
   transfer confirmation page gets the same treatment automatically. */
body.view-pg-cod-default {
  --afsta-green-950: #102e20;
  --afsta-green-900: #173d29;
  --afsta-green-800: #215236;
  --afsta-green-700: #2f6845;
  --afsta-green-100: #e9f2ec;
  --afsta-green-50: #f5f9f6;
  --afsta-gold: #d4a941;
  --afsta-ink: #17231c;
  --afsta-text: #3e4b43;
  --afsta-muted: #758078;
  --afsta-line: #dce5df;
  --afsta-shadow: 0 20px 50px rgba(16, 46, 32, 0.09);

  background:
    radial-gradient(circle at 100% 0%, rgba(212, 169, 65, 0.10), transparent 30%),
    #f4f7f5 !important;
}

.view-pg-cod-default #fMatter {
  width: 100% !important; max-width: 860px !important; margin: 0 auto !important;
  padding: 46px 24px 80px !important;
}

/* BANK DETAILS CARD (rebuilt from .content-financial-pg-description by JS) */
.afsta-bt-details-card {
  overflow: hidden; margin-bottom: 22px; background: #fff;
  border: 1px solid var(--afsta-line); border-radius: 18px; box-shadow: var(--afsta-shadow);
}
.afsta-bt-heading {
  display: flex; align-items: center; gap: 14px; padding: 24px 28px; border-bottom: 1px solid var(--afsta-line);
}
.afsta-bt-heading-icon {
  display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px;
  color: var(--afsta-green-800); background: var(--afsta-green-100); border-radius: 11px;
}
.afsta-bt-heading-icon svg { width: 21px; height: 21px; }
.afsta-bt-heading h3 { margin: 0 0 3px !important; color: var(--afsta-ink) !important; font-size: 19px !important; font-weight: 750 !important; }
.afsta-bt-heading p { margin: 0; color: var(--afsta-muted); font-size: 12.5px; }

.afsta-bt-rows { padding: 6px 28px 20px; }
.afsta-bt-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid #edf1ee;
}
.afsta-bt-row:last-child { border-bottom: 0; }
.afsta-bt-row-label { flex: 0 0 auto; color: var(--afsta-muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.afsta-bt-row-value { flex: 1 1 auto; text-align: right; color: var(--afsta-ink); font-size: 14px; font-weight: 750; word-break: break-word; }
/* Bank credentials are literal values, not prose — a sitewide script rewrites
   "AFSTA" to "AfSTA" for branding purposes elsewhere on the site, which is
   misleading on the Account Name here since it silently alters what the
   user should type into their bank transfer. Force uppercase on just this
   field so it always displays correctly regardless of what that script
   does to the underlying text, without changing the casing of every row. */
.afsta-bt-row-value--locked { text-transform: uppercase; }

/* FORM CARD */
.afsta-bt-form-card {
  overflow: hidden; background: #fff; border: 1px solid var(--afsta-line);
  border-radius: 18px; box-shadow: var(--afsta-shadow);
}
.afsta-bt-form-body { padding: 26px 28px 28px; }

/* .fForm itself was never reset — it can carry the site's own padding/margin,
   and if it (or a Bootstrap .row class) gets applied dynamically it also
   brings flex + gutter spacing (padding-left/right, margin-top) from
   Bootstrap's grid variables. That combination is what produced the large
   dead gap above "Full Name" and could reintroduce it any time the site's
   own JS toggles that class. Reset unconditionally rather than guessing
   at a specific leftover value. */
.view-pg-cod-default .fForm {
  display: block !important; width: 100% !important;
  margin: 0 !important; padding: 0 !important;
}
.view-pg-cod-default .fForm > * {
  flex: none !important; width: 100% !important; max-width: 100% !important;
  margin-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}

/* Cap field width — a 46px-tall single-line input spanning the full ~800px
   card width looks oversized; most forms read better constrained. */
.view-pg-cod-default .fForm .form-item { max-width: 460px; margin: 0 0 18px !important; }
.view-pg-cod-default .fForm .form-item:last-of-type { margin-bottom: 0 !important; }
.view-pg-cod-default .fForm .form-item label {
  display: block; margin-bottom: 7px; color: var(--afsta-ink); font-size: 13px; font-weight: 750;
}
.view-pg-cod-default .fForm .form-item input[type="text"] {
  box-sizing: border-box; width: 100% !important; height: 46px !important; margin: 0 !important;
  padding: 0 14px !important; color: var(--afsta-ink); background: #fafbf9;
  border: 1px solid #cbd7cf !important; border-radius: 9px !important; font-size: 14px; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.view-pg-cod-default .fForm .form-item input[type="text"]:focus {
  border-color: var(--afsta-green-700) !important; background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 104, 69, 0.10);
}
.view-pg-cod-default .fForm .form-item input[type="text"].date {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='4' y='5' width='16' height='16' rx='2' stroke='%23758078' stroke-width='1.6'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4' stroke='%23758078' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
}
.view-pg-cod-default .fForm .form-item .hint {
  margin-top: 7px; color: var(--afsta-muted); font-size: 11.5px; line-height: 1.5;
}

.view-pg-cod-default .fForm .buttons {
  display: flex; max-width: 460px; justify-content: flex-start; margin: 22px 0 0 !important; padding: 0 !important;
}
.view-pg-cod-default .fForm .buttons input[type="submit"] {
  min-width: 200px !important; min-height: 48px !important; margin: 0 !important; padding: 0 24px !important;
  color: #fff !important; background: linear-gradient(135deg, var(--afsta-green-700), var(--afsta-green-900)) !important;
  border: 0 !important; border-radius: 9px !important; box-shadow: 0 10px 22px rgba(23, 61, 41, 0.20);
  font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.15px; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.view-pg-cod-default .fForm .buttons input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(23, 61, 41, 0.27); }
.view-pg-cod-default .fForm .buttons input[type="submit"]:focus-visible { outline: 3px solid rgba(212, 169, 65, 0.45); outline-offset: 3px; }

@media (max-width: 600px) {
  .view-pg-cod-default #fMatter { padding: 24px 14px 55px !important; }
  .afsta-bt-heading, .afsta-bt-form-body { padding: 20px; }
  .afsta-bt-rows { padding: 4px 20px 16px; }
  .afsta-bt-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .afsta-bt-row-value { text-align: left; }
  .view-pg-cod-default .fForm .buttons { justify-content: stretch; }
  .view-pg-cod-default .fForm .buttons input[type="submit"] { width: 100% !important; }
}