/* == Scrollbar == */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    width: 12px;
    border-left: 0 solid white;
    border-right: 0 solid white;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(30deg, #eee 40%, #255c99 60%);
    width: 0;
    height: 25%;
    transition: .5s ease;
    cursor: pointer;
}


/* == Light Mode Styles == */
:root {
    /* Barnad Tri Colors*/
    --blue-color-1: #14253d;
    --blue-color-2: #1e395c;
    --blue-color-3: #1f446d;
    --blue-color-4: #214e83;
    --blue-color-primary: #255c99;
    --blue-color-6: #377cc0;
    --blue-color-7: #5c99d4;
    --blue-color-8: #95bce4;
    --blue-color-9: #c7daf0;
    --blue-color-10: #e6eef8;
    --blue-color-11: #f3f6fc;

    --green-color-1: #1f2b08;
    --green-color-2: #3e4f18;
    --green-color-3: #485d17;
    --green-color-4: #597516;
    --green-color-5: #759917;
    --green-color-primary: #99c222;
    --green-color-7: #b6db40;
    --green-color-8: #cde96d;
    --green-color-9: #e2e3a3;
    --green-color-10: #f1f9ce;
    --green-color-11: #f9fde8;

    --pink-color-1: #4c0b1c;
    --pink-color-2: #7e1d36;
    --pink-color-3: #971d36;
    --pink-color-4: #b62048;
    --pink-color-primary: #cc2c5c;
    --pink-color-6: #e45084;
    --pink-color-7: #ee78a5;
    --pink-color-8: #f5acc9;
    --pink-color-9: #f9d1e2;
    --pink-color-10: #fbe8f0;
    --pink-color-11: #fcf3f7;

    --white-color-primary: #eeeeee;
    --black-color-primary: #222222;

    --primary-color: #255c99;
    --secondary-color: #99c222;
    --tertiary-color: #cc2c5c;

    --primary-white: #eee;
    --secondary-white: #ddd;
    --tertiary-white: #ccc;

    --primary-black: #222;
    --secondary-black: #333;
    --tertiary-black: #444;

    --background-color-1: #eee;
    --text-color-1: #222;

    --background-color-2: #ddd;
    --text-color-2: #333;

    --background-color-3: #ccc;
    --text-color-3: #444;

    --header-bg: var(--primary-color);
    --button-bg: var(--secondary-color);
    --button-text: #eee;

    --white-color-1: #ffffff;
    --white-color-2: #eeeeee;
    --white-color-3: #dcdcdc;

    --black-color-1: #000000;
    --black-color-2: #222222;
    --black-color-3: #3d3d3d;
    --black-color-4: #4f4f4f;
    --black-color-5: #6d6d6d;
    --black-color-6: #b0b0b0;

    --white-bg-1: #f5f5f5;
    --white-bg-2: #f6f7ff;
    --white-bg-3: #e0ffec;
    --white-bg-4: #fbf3e9;
    --white-bg-5: #ffe7da;

    --black-bg-1: #0e0e0e;
    --black-bg-2: #111111;
    --black-bg-3: #181818;
    --black-bg-4: #1c1c1c;
    --black-bg-5: #2e2e2e;
    --black-bg-6: #393939;

    --bg-white-1: #f3f6fc;
    --bg-white-2: #f9fde8;
    --bg-white-3: #fcf3f7;

    --bg-black-1: #14253d;
    --bg-black-2: #1f2b08;
    --bg-black-3: #4c0b1c;

    --heading-color: #222;
    --subheading-color: #333;
    --text-color: #444;

    --h1-color: #222;
    --h2-color: #333;
    --h3-color: #444;
    --h4-color: #555;
    --h5-color: #555;
    --h6-color: #555;
    --p-color: #333;

    /*Socialmedia App Icon Colors*/
    --linkedin: #0077b5;
    --twitter: #1da1f2;
    --twitter-x: #000;
    --instagram: #d62976;
    --facebook: #1877f2;
    --pinterest: #e60023;
    --threads: #000;
    --youtube: #ff0000;
    --google-plus: #db4a39;

    /*   
        primary bule - hex : rgb(37, 92, 153)
        primary green - hex : rgb(153, 194, 34)
        primary pink - hex : rgb(204, 44, 92)
    */
}


/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-white-1);
  color: var(--subheading-color);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.form-container {
  background-color: var(--white-color-1);
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 500px;
}

.form-container h2 {
  margin-bottom: 20px;
  color: var(--black-color-2);
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid var(--white-color-3);
  border-radius: 6px;
  font-size: 16px;
}

.form-group input[type="file"] {
  padding: 8px;
}

button[type="submit"] {
  background-color: var(--primary-color);
  color: var(--white-color-1);
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s;
}

button[type="submit"]:hover {
  background-color: var(--primary-color);
}

/* Success Modal */
.success-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}

.success-modal .modal-content {
  background-color: var(--white-color-1);
  padding: 32px;
  border-radius: 10px;
  max-width: 450px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.success-modal h3 {
  color: var(--seconday-color);
  margin-bottom: 16px;
}

.success-modal p {
  font-size: 16px;
  color: var(--black-color-4);
}

/* Hidden class */
.hidden {
  display: none;
}

.g-recaptcha {
  transform: scale(1.01);
  transform-origin: 0 0;
  margin-bottom: 20px;
}