/* Global Font styles */
:root {
  --default-font: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /*--heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
  --size-one: 10px;
  --size-two: 15px;
  --size-three: 20px;*/
}

/* Global Colors
Light Blue:   adc4f7    rgba(173, 196, 247, 1);
Blue 1:       2164ff    rgba(33, 100, 255, 1);
Blue 2:       0c48cf    rgba(12, 72, 207, 1);
Dark Blue     092a75    rgba(9, 42, 117, 1);
*/

:root {
  --lightest: rgba(173, 196, 247, 1);
  --light: rgba(33, 100, 255, 1);
  --normal: rgba(12, 72, 207, 1);
  --dark: rgba(9, 42, 117, 1);
  --darkest: rgba(4, 24, 69, 1);

  --background-color: var(--dark);
  --background-color-inverse: var(--light);

  --nav-color: var(--dark);
  --nav-color-hover: var(--darkest);
  --nav-color-focus: var(--normal);
  --nav-color-active: var(--normal);

  --nav-background: var(--lightest);

  --cover-background-top: rgba(173, 196, 247, 1);
  --cover-background-bottom: rgba(12, 72, 207, 0.7);



  --modal-color: var(--darkest);
  --modal-background-color: rgba(4, 24, 69, 0.7);
  --modal-container-background-color: var(--lightest);
}


/* 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: #ffffff;   
  --default-color: #444444; 
  --heading-color: #327703; 
  --accent-color: #7fcc1a; 
  --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. *
}

/* 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: #ffffff;  /* The default color of the main navmenu links *
  --nav-hover-color: #7fcc1a; /* 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: #444444; /* Used for navigation links of the dropdown items in the navigation menu. *
  --nav-dropdown-hover-color: #7fcc1a; /* 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: #f4f5fe;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #2c5e00;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #3c9100;
  --contrast-color: #ffffff;
}

/* Smooth scrolling */
:root {
  scroll-behavior: smooth;
}





html {
  scroll-padding-top: calc(4.5rem - 1px);
}

body {
  letter-spacing: 0.0625em;
}

.user-select-all {
  -webkit-user-select: all !important;
     -moz-user-select: all !important;
          user-select: all !important;
}

.user-select-auto {
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
          user-select: auto !important;
}

.user-select-none {
  pointer-events: none;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

/* Navigation Menu */

#navMenu {
  min-height: 3.5rem;
  background-color: var(--nav-background);
}

#navMenu .navbar-toggler {
  font-size: 80%;
  padding: 0.75rem;
  color: var(--nav-color);
  border: 1px solid var(--nav-color);
}

#navMenu .navbar-toggler:focus {
  outline: none;
  color: var(--nav-color-focus);
  border: 1px solid var(--nav-color-focus);
}

#navMenu .navbar-brand {
  color: var(--nav-color);
  font-weight: bold;
  padding: 0.9rem 0;
}

#navMenu .navbar-nav .nav-item:hover, #navMenu .navbar-nav .nav-item:active, #navMenu .navbar-nav .nav-item:focus {
  outline: none;
  background-color: transparent;
}

@media (min-width: 992px) {

  #navMenu {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
  }

  #navMenu .navbar-brand {
    padding: 0.5rem 0;
    color: var(--nav-color);
  }

  #navMenu .nav-link {
    transition: none;
    padding: 2rem 1.5rem;
    color: var(--nav-color);
  }

  #navMenu .nav-link:hover {
    color: var(--nav-color-hover);
    outline: none;
    border-bottom: 0.25rem solid var(--nav-color-hover);
  }

  #navMenu .nav-link:active {
    color:  var(--nav-color-active);
  }


  /* Navigation menu when scrolled down */
  #navMenu.navbar-shrink {
    background-color: var(--nav-background);
  }

  #navMenu.navbar-shrink .navbar-brand {
    color: var(--nav-color);
  }

  #navMenu.navbar-shrink .nav-link {
    color: var(--nav-color);
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 0.25rem solid transparent;
  }

  #navMenu.navbar-shrink .nav-link:hover {
    color: var(--nav-color-hover);
    border-bottom: 0.25rem solid var(--nav-color-hover);
  }

  #navMenu.navbar-shrink .nav-link:active {
    color: var(--nav-color-active);
  }

  #navMenu.navbar-shrink .nav-link.active {
    color: var(--nav-color-active);
    outline: none;
    border-bottom: 0.25rem solid var(--nav-color-active);
  }

}


/* Cover Section */

.cover {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 35rem;
  padding: 10rem 0;
  background: linear-gradient(to bottom, var(--cover-background-top) 0%, var(--cover-background-bottom) 75%, #000 100%), url("../img/bg-cover.png");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

.cover h1, .cover .h1 {
  font-family: var(--default-font);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 2.5rem;
  letter-spacing: 0.8rem;
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.cover h2, .cover .h2 {
  max-width: 20rem;
  font-size: 1rem;
}

.cover .btn {
  box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
  padding: 1.25rem 2rem;
  font-family: var(--default-font);
  font-size: 80%;
  color: var(--lightest);
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  border: 1px solid var(--darkest);
  background-color: var(--darkest);
}
.cover .btn:hover, .cover .btn:focus {
  background-color: var(--dark);
}

@media (min-width: 768px) {
  .cover h1, .cover .h1 {
    font-size: 4rem;
    line-height: 4rem;
  }
}

@media (min-width: 992px) {
  .cover {
    height: 100vh;
    padding: 0;
  }
  .cover h1, .cover .h1 {
    font-size: 6.5rem;
    line-height: 6.5rem;
    letter-spacing: 0.8rem;
  }
  .cover h2, .cover .h2 {
    max-width: 30rem;
    font-size: 1.25rem;
  }
}


/* Projects Section */

.projects-section {
  padding: 10rem 0;
}
.projects-section .featured-text {
  padding: 2rem;
}
@media (min-width: 992px) {
  .projects-section .featured-text {
    padding: 0 0 0 2rem;
    border-left: 0.5rem solid var(--normal);
  }
}
.projects-section .project-text {
  padding: 3rem;
  font-size: 90%;
}
@media (min-width: 992px) {
  .projects-section .project-text {
    padding: 5rem;
  }
}


/* Contact Section */

.contact-section {
  padding: 10rem 0 2rem 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 75%, #000 100%), url("../assets/img/bg-footer.png");
  background-position: top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

.contact-section .card {
  border: 0;
  border-bottom: 0.25rem solid var(--darkest);
}

.contact-section .card h4, .contact-section .card .h4 {
  font-size: 0.8rem;
  font-family: var(--default-font);
  text-transform: uppercase;
  letter-spacing: 0.15rem;
}

.contact-section .card hr {
  opacity: 1;
  border-color: var(--dark);
  border-width: 0.25rem;
  width: 3rem;
}
.contact-section .card a {
  color: rgba( 255, 255, 255, 0.5);
  text-decoration: none;
}

.contact-section .card a:hover {
  color: rgba( 255, 255, 255, 0.8);
  text-decoration: underline;
}

.contact-section .card svg {
  color: var(--normal );
}

.about-section {
  padding: 15rem 0 10rem 0;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 75%, rgba(0, 0, 0, 0.8) 100%), url("../assets/img/bg-about.png");  
  background-position: top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

.about-section p {
  margin-bottom: 5rem;
}

/*--------------------------------------------------------------
# Login Form
--------------------------------------------------------------*/
.login-form input[type=text],
.login-form input[type=email],
.login-form textarea, {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.login-form input[type=text]:focus,
.login-form input[type=email]:focus,
.login-form textarea:focus {
  border-color: var(--accent-color);
}

.login-form input[type=text]::placeholder,
.login-form input[type=email]::placeholder,
.login-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.login-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.login-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/* PHP Email Form Messages
------------------------------*/
.login-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.login-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.login-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.login-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: contact-form-loading 1s linear infinite;
}

@keyframes login-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/*--------------------------------------------------------------
# Register Form
--------------------------------------------------------------*/
.register-form input[type=text],
.register-form input[type=email],
.register-form textarea, {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.register-form input[type=text]:focus,
.register-form input[type=email]:focus,
.register-form textarea:focus {
  border-color: var(--accent-color);
}

.register-form input[type=text]::placeholder,
.register-form input[type=email]::placeholder,
.register-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.register-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.register-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/* PHP Email Form Messages
------------------------------*/
.register-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.register-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.register-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.register-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: contact-form-loading 1s linear infinite;
}

@keyframes register-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.custom-modal {
  background: var(--modal-background-color);
  border-radius: 20px;
}
.custom-modal .modal-content {
  background: var(--modal-container-background-color);
  color:  var(--modal-color);
}
.custom-modal .modal-header button {
  background: transparent;
  outline: none;
  border: none;
  margin-left: auto;
}
.custom-modal .modal-header button:hover {
  background: var(--modal-color);
  color: var(--lightest);
}