/**
* Updated: Oct 28 2024 with Bootstrap v5.3.3
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */

@font-face {
  font-family: "Gabarito";
  src: url("../fonts/Gabarito/Gabarito-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("../fonts/Gabarito/Gabarito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("../fonts/Gabarito/Gabarito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("../fonts/Gabarito/Gabarito-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("../fonts/Gabarito/Gabarito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("../fonts/Gabarito/Gabarito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Open Sauce One";
  src: url("../fonts/OpenSauceOne/OpenSauceOne-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

/* @font-face {
    font-family: "Open Sauce One";
    src: url("../fonts/OpenSauceOne/OpenSauceOne-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
  } */

@font-face {
  font-family: "Open Sauce One";
  src: url("../fonts/OpenSauceOne/OpenSauceOne-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* @font-face {
    font-family: "Open Sauce One";
    src: url("../fonts/OpenSauceOne/OpenSauceOne-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
  } */

@font-face {
  font-family: "Open Sauce One";
  src: url("../fonts/OpenSauceOne/OpenSauceOne-ExtraBold.ttf")
    format("truetype");
  font-weight: 800;
  font-style: normal;
}

/* @font-face {
    font-family: "Open Sauce One";
    src: url("../fonts/OpenSauceOne/OpenSauceOne-ExtraBoldItalic.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
  } */

@font-face {
  font-family: "Open Sauce One";
  src: url("../fonts/OpenSauceOne/OpenSauceOne-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

/* @font-face {
    font-family: "Open Sauce One";
    src: url("../fonts/OpenSauceOne/OpenSauceOne-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
  } */

@font-face {
  font-family: "Open Sauce One";
  src: url("../fonts/OpenSauceOne/OpenSauceOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Open Sauce One";
  src: url("../fonts/OpenSauceOne/OpenSauceOne-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Kanit";
  src: url("../fonts/Kanit/Kanit-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* @font-face {
    font-family: "Open Sauce One";
    src: url("../fonts/OpenSauceOne/OpenSauceOne-SemiBoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
  } */

:root {
  --default-font: "Gabarito";
  --heading-font: "Gabarito";
  --nav-font: "Gabarito";
  --custom-font: "Gabarito";
  --large-heading-font: "Open Sauce One";
  --highlight-font: "Kanit";
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ebf2ff; /* Background color for the entire website, including individual sections */
  --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #1d1d1f; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #4a80f5; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --grey-color: rgba(29, 29, 31, 70%);
  --white-color: #ffffff;
  --secondary-color: #4a80f5;
  --tertiary-color: #673ab7;
  --vibrant-color: #f5a623;
  --primary-gradient: linear-gradient(to bottom, #2b6df8, #5e17d3);
  --gradient-1: linear-gradient(to bottom, #2ca9e0, #136e96);
  --gradient-2: linear-gradient(to bottom, #4a3f8c, #2b2460);
  --gradient-3: linear-gradient(to bottom, #1f2933, #0b0d0f);
  --gradient-4: linear-gradient(to bottom, #41b883, #21634b);
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: rgba(
    29,
    29,
    31,
    70%
  ); /* The default color of the main navmenu links */
  --nav-hover-color: #4a80f5; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #4a80f5; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f3f9ff;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #4a80f5;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #409dfd;
  --contrast-color: #ffffff;
}

.btn-outline-primary {
  border-color: #4a80f5;
}

/* Header */

.header {
  background-color: transparent;
}

/* Header */

/* Footer */

.footer .footer-top {
  padding-top: 160px;
}

/* Footer */

/* Support and Guidance Form Section */

.supportandguidanceformsection {
  background-color: #fff;
  padding: 0px;
}

.supportandguidanceformsection .leftcontentsection {
  padding: 160px 0px;
  background-image: url(../img/ContactUs/bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}

.supportandguidanceformsection .rightcontentsection {
  padding: 160px 0;
  background: linear-gradient(to bottom, #1f2933, #0b0d0f);
  position: relative;
}

.supportandguidanceformsection .rightcontentsection .buttonsection {
  margin-top: 80px;
}

.supportandguidanceformsection
  .rightcontentsection
  .buttonsection
  .btn-secondary {
  color: #fff;
  border-color: #fff;
  margin-right: 24px;
}

.supportandguidanceformsection .small-heading {
  font-size: 34px;
  font-family: var(--large-heading-font);
  margin-bottom: 8px;
  font-weight: 600;
}

.supportandguidanceformsection .rightcontentsection .element1section {
  position: absolute;
  right: 60px;
  top: 40px;
}

.supportandguidanceformsection .rightcontentsection .bgelementsection {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.supportandguidanceformsection .leftcontentsection .element2section {
  position: absolute;
  left: 60px;
  top: 380px;
}

.supportandguidanceformsection .leftcontentsection .element3section {
  position: absolute;
  left: 60px;
  top: 40px;
}

.supportandguidanceformsection .leftcontentsection p {
  margin-bottom: 0px;
}

.supportandguidanceformsection .leftcontentsection .mapoverlayimage {
  width: 100%;
  /* position: absolute;
    bottom: 0;
    left: 0; */
}

.supportandguidanceformsection .leftcontentsection .headingsection,
.supportandguidanceformsection .rightcontentsection .headingsection {
  margin-bottom: 60px;
}

.supportandguidanceformsection .rightcontentsection h3,
.supportandguidanceformsection .rightcontentsection p {
  color: var(--white-color);
}

.supportandguidanceformsection .leftcontentsection .contentsection h4 {
  font-size: 20px;
}

.supportandguidanceformsection .rightcontentsection .contentsection h4 {
  font-size: 20px;
  color: var(--white-color);
  margin-bottom: 30px;
}

.supportandguidanceformsection .leftcontentsection .contentsection p {
  font-size: 16px;
}

.supportandguidanceformsection
  .leftcontentsection
  .contentsection
  .detailedcontentsection {
  margin-bottom: 40px;
}

.supportandguidanceformsection
  .leftcontentsection
  .contentsection
  .detailedcontentsection:last-child {
  margin-bottom: 0px;
}

.supportandguidanceformsection .rightcontentsection .form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.supportandguidanceformsection
  .rightcontentsection
  .form-check-input:checked::after {
  content: "✓";
  color: white;
  font-size: 14px;
  position: relative;
  top: -2px;
  left: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Support and Guidance Form Section */

/* Form Container */
.radio-form {
  color: #000000;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  /* margin: 2.5em auto; */
}

/* Fieldset */
.radio-form__fieldset {
  border: none;
  padding: 0;
}

.radio-form__legend {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 1em;
}

/* Group Wrapper */
.radio-form__group {
  margin-bottom: 16px;
}

.radio-form__group:last-child {
  margin-bottom: 0px;
}

/* Input (Hidden Native Radio) */
.radio-form__input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Checked State for Radio */
.radio-form__input:checked + .radio-form__label .radio-form__tick {
  stroke: #000000; /* Black tick */
  stroke-dashoffset: 0;
}

.radio-form__input:checked + .radio-form__label .radio-form__circle {
  stroke: #fff;
  fill: #fff;
}

/* Focus State */
.radio-form__input:focus + .radio-form__label .radio-form__circle {
  stroke: #fff;
}

/* Label */
.radio-form__label {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 1em;
}

/* Label Text */
.radio-form__text {
  margin-left: 15px;
  opacity: 0.75;
  color: #fff;
}

/* Icon */
.radio-form__icon {
  height: 24px;
  width: 24px;
}

.radio-form__circle {
  fill: none;
  stroke: #cccccc; /* Default border color */
  stroke-width: 1.5;
  transition: stroke 0.3s ease-in, fill 0.3s ease-in;
}

.radio-form__tick {
  fill: none;
  stroke: #000000; /* Tick color */
  stroke-dasharray: 11;
  stroke-dashoffset: 11;
  stroke-width: 1.5;
  transition: stroke-dashoffset 0.3s ease-in;
}

.supportandguidanceformsection .rightcontentsection .custom-all-div-section {
  display: flex;
  flex-wrap: wrap;
}

.supportandguidanceformsection
  .rightcontentsection
  .custom-all-div-section
  .custom-div-section {
  margin-bottom: 24px;
  padding: 0px 12px;
}

.supportandguidanceformsection
  .rightcontentsection
  .custom-all-div-section
  .custom-div-section:last-child {
  margin-bottom: 0px;
}

.supportandguidanceformsection
  .rightcontentsection
  .custom-all-div-section
  .custom-div-section
  label {
  margin-bottom: 16px;
  color: #fff;
}

.supportandguidanceformsection
  .rightcontentsection
  .custom-all-div-section
  .custom-div-section
  .custom-form-section {
  border-radius: 5px;
  background-color: var(--white-color);
}

/* Default styles */
.step1section,
.step2section {
  display: none; /* Initially hidden */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* Active section styles */
.step1section.active,
.step2section.active {
  display: block; /* Show active section */
  opacity: 1;
}

.supportandguidanceformsection .phonenumbersection,
.supportandguidanceformsection .mailsection {
  color: var(--default-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.supportandguidanceformsection .phonenumbersection:hover,
.supportandguidanceformsection .mailsection:hover {
  color: var(--secondary-color);
  text-decoration: underline;
  cursor: pointer;
}