/* ============================================
   CSS CUSTOM PROPERTIES (CSS Variables)
   ============================================
   These variables define the design system for the Coactify website.
   Using CSS custom properties allows for easy theming and consistent
   styling across the entire application. Modify these values to change
   the global appearance of the site.
   
   Usage: var(--variable-name)
   Example: color: var(--color-primary);
   ============================================ */
:root {
  /* Colors - Brand color palette for consistent theming */
  --color-primary: #efaa5d;
  --color-primary-dark: #f6a041;
  --color-primary-light: #efaa5ecc;
  --color-secondary: rgb(112, 114, 116);
  --color-text-dark: #000;
  --color-text-light: #fff;
  --color-text-gray: #7d7f81;
  --color-text-light-gray: #6e7072;
  --color-bg-light: #f7f7f7;
  --color-bg-gray: #e1e1e1;
  --color-bg-dark: #4c4d4e;
  --color-error: #a94442;
  --color-border: #ccc;
  
  /* Spacing - Consistent spacing scale for layout consistency */
  --spacing-xs: 5px;    /* Extra small spacing */
  --spacing-sm: 10px;   /* Small spacing */
  --spacing-md: 15px;   /* Medium spacing */
  --spacing-lg: 20px;   /* Large spacing */
  --spacing-xl: 30px;   /* Extra large spacing */
  --spacing-2xl: 60px;  /* Double extra large spacing */
  
  /* Typography - Font family definitions for text hierarchy */
  --font-family-regular: 'WorkSans-Regular';  /* Regular weight body text */
  --font-family-medium: 'WorkSans-Medium';    /* Medium weight text */
  --font-family-light: 'WorkSans-Light';      /* Light weight text */
  --font-family-bold: 'WorkSans-Bold';        /* Bold weight text */
  --font-family-semibold: 'WorkSans-SemiBold'; /* Semi-bold weight text */
  --font-family-ubuntu: 'Ubuntu-Regular';     /* Ubuntu font for specific elements */
  
  /* Border Radius - Rounded corner values for consistent UI elements */
  --border-radius-sm: 20px;  /* Small border radius for buttons and small elements */
  --border-radius-md: 25px;  /* Medium border radius for cards and containers */
  --border-radius-lg: 30px;  /* Large border radius for major UI elements */
  
  /* Transitions - Animation timing for smooth user interactions */
  --transition-fast: 0.2s ease-in-out;   /* Fast transition for hover effects */
  --transition-normal: 0.3s ease-in-out; /* Normal transition for general animations */
  
  /* Z-index - Layer stacking order for proper element positioning */
  --z-dropdown: 1000;        /* Dropdown menus */
  --z-sticky: 1020;          /* Sticky navigation elements */
  --z-fixed: 1030;           /* Fixed positioned elements */
  --z-modal-backdrop: 1040;  /* Modal backdrop overlay */
  --z-modal: 1050;           /* Modal content */
  --z-popover: 1060;         /* Popover content */
  --z-tooltip: 1070;         /* Tooltip content (highest z-index) */
}

/* ============================================
   TYPOGRAPHY & TEXT STYLES
   ============================================
   Global typography settings and utility classes for text styling.
   These classes provide consistent text formatting across the site.
   ============================================ */

body {
  font-family: var(--font-family-regular);
}

p {
  font-family: var(--font-family-regular);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-medium);
}

/* Heading size classes - Bootstrap-style heading utilities */
.h1, h1 {
  font-size: 2rem;
}

.h2, h2 {
  font-size: 1.6rem;
}

.h3, h3 {
  font-size: 1.4rem;
}

.h4, h4 {
  font-size: 1.2rem;
}

.h5, h5 {
  font-size: 1rem;
}

/* Link hover effect - changes to primary brand color */
a:hover {
    color: var(--color-primary) !important;
}

/* Text weight utility classes */
.txt-light {
  font-family: var(--font-family-light) !important;
}

.txt-bold {
  font-family: var(--font-family-bold) !important;
}

/* Section title decorative underlines - different styles for visual hierarchy */
.section-title:after {
  content: '';
  display: inline-block;
  width: 60px;
  height: 2px;
  background-color: var(--color-primary);
  position: absolute;
  margin-top: var(--spacing-lg);
  margin-left: var(--spacing-sm);
}

.section-title-2:after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background-color: var(--color-primary);
  margin: var(--spacing-lg) auto;
}

.section-title-3:after  {
  content: '';
  display: block;
  width: 70px;
  height: 7px;
  background-color: var(--color-primary);
  margin: var(--spacing-sm) 0;
}

/* Text color utility classes */
.txt-orange {
  color: var(--color-primary);
}

.txt-white {
  color: var(--color-text-light);
}

.txt-black {
  color: var(--color-text-dark);
}

/* ============================================
   BACKGROUND UTILITIES
   ============================================
   Utility classes for setting background colors.
   ============================================ */

.bg-orange {
  background-color: var(--color-primary);
}

/* ============================================
   BUTTON STYLES
   ============================================
   Custom button styling with brand colors and hover effects.
   These classes extend Bootstrap button styles with Coactify branding.
   ============================================ */

.btn {
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  transition: var(--transition-fast);
}

/* Primary button - solid orange background */
.btn-primary {
  color: var(--color-text-light);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Primary button hover and active states */
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  color: var(--color-text-light) !important;
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Primary button focus ring */
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-primary.focus, .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(246, 160, 65, 0.50);
}

/* Outline primary button - transparent with orange border */
.btn-outline-primary {
  color: var(--color-text-light);
  border-color: var(--color-primary-dark);
}

/* Outline primary button hover and active states */
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
  color: var(--color-text-light) !important;
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Outline primary button focus ring */
.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-primary.dropdown-toggle:focus, .btn-outline-primary.focus, .btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(246, 160, 65, 0.50);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================
   Main website header, navigation bar, and accessibility features.
   Includes sticky positioning, responsive menu, and dropdown styling.
   ============================================ */

header {
  margin-bottom: 84px;
}

/* Accessibility skip link - allows keyboard users to skip to main content */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: 8px;
  z-index: var(--z-tooltip);
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: 0;
}

/* Sticky navigation bar - stays fixed at top when scrolling */
.sticky-top {
  left: 0;
  position: fixed;
  z-index: var(--z-sticky);
  top: 0;
  right: 0;
  background: #fff;
}

.navbar-brand {
  line-height: 80px;
}

/* Decorative chevron element for branding */
.navbar-brand::after {
  content: '';
  display: inline-block;
  width: 80px;
  height: 90px;
  background-image: url(/app/image/imageimage?name=CoactifyChevron.png);
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
  position: absolute;
  z-index: var(--z-tooltip);
  left: 0;
  top: 0;
}

/* Navigation items - orange background tabs */
.nav-item {
  display: inline-block;
  line-height: 90px;
  height: 90px;
  background-color: var(--color-primary);
  margin-right: 5px;
  vertical-align: top;
  transition: background-color var(--transition-fast);
}

.nav-item:last-child {
  margin-right: 0px !important;
}

/* Navigation links - white text with hover effects */
.nav-link {
  color: var(--color-text-light);
  font-family: var(--font-family-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: 0px;
}

.nav-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Navigation item hover state - changes to secondary gray */
.nav-item:hover {
  background-color: var(--color-secondary) !important;
  color: var(--color-text-light) !important;
}

/* Active navigation link state */
.nav-link.active {
  background-color: var(--color-secondary) !important;
  color: var(--color-text-light) !important;
}

.nav-link.active:hover {
  color: var(--color-text-light) !important;
}

/* Last navigation item styling - always secondary color */
.nav-item:last-child {
  background-color: var(--color-secondary) !important;
  color: var(--color-text-light) !important;
}

.navbar-nav .nav-link {
  display: inline;
}

/* Mobile hamburger menu button */
.navbar-toggler {
  background: var(--color-primary);
  color: var(--color-text-light);
  font-size: 20px;
  line-height: 20px;
  transition: background-color var(--transition-fast);
}

.navbar-toggler:focus {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.navbar-toggler:hover {
  background: var(--color-primary-dark);
}

.navbar-toggler-right {
  position: absolute;
  top: 22px;
  right: 20px;
  width: 80px;
}

/* Dropdown menu styling */
.dropdown-menu {
  border-radius: 0px;
  padding: 0px;
  z-index: var(--z-dropdown);
}

.dropdown-item {
  line-height: 30px;
  transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
  background-color: var(--color-bg-light);
}

.dropdown-divider {
  margin: 0px;
}


/* ============================================
   RESPONSIVE NAVIGATION MEDIA QUERIES
   ============================================
   Breakpoints for responsive navigation behavior.
   Adjusts layout and spacing for different screen sizes.
   ============================================ */

@media all and (max-width: 768px) {
  .nav-item {
    margin-right: 0px;
    text-align: center;
  }
}

@media all and (max-width: 767px) {
  .nav-item.active {
    border-bottom: none;
  }
}

@media all and (min-width: 1024px) {
  .navbar-expand-lg .navbar-collapse  {
    float: right;
  }
}

@media all and (min-width: 1024px) and (max-width: 1280px) {
  .navbar-expand-lg .navbar-nav .nav-link {
      padding-right: .25rem !important;
      padding-left: .25rem !important;
      font-size: 12px !important;
  }
  .navbar-brand img {
    width: 175px !important;
  }
}

/* ============================================
   FOTORAMA GALLERY/SLIDER
   ============================================
   Styling for the Fotorama image gallery component.
   Includes navigation dots, captions, and button styling.
   ============================================ */

.fotorama__nav--dots .fotorama__nav__frame {
  width: 45px;
}

.fotorama__nav--dots {
  position: absolute;
  bottom: 20px;
  z-index: var(--z-tooltip);
}

.fotorama__dot {
  width: 25px;
  height: 25px;
  top: 0px;
  border-radius: 50%;
  border: 1px solid var(--color-text-light-gray);
  transition: border-color var(--transition-fast);
}

.fotorama__nav__frame.fotorama__active .fotorama__dot {
  width: 25px;
  height: 25px;
  border-width: 1px;
  background: transparent;
}

.fotorama__nav__frame.fotorama__active .fotorama__dot:before {
  content: '';
  display: inline;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-primary);
  position: absolute;
  top: 2.5px;
  left: 2.5px;
}

.fotorama__caption {
  background-color: var(--color-primary-light);
  top: 15% !important;
  border-top-right-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);
  width: 45%;
  height: 60%;
  min-height: 330px;
  padding: var(--spacing-xl) 60px;
  min-width: 300px;
  color: var(--color-text-light) !important;
}

.fotorama__select {
  line-height: 26px!important;
  font-size: 16px!important;
  font-weight: lighter;
}

.fotorama__btn {
  color: var(--color-primary) !important;
  background: #fff;
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-weight: 600;
  margin-top: var(--spacing-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.fotorama__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.fotorama__caption a {
  border-bottom: 0px !important;
}

/* ============================================
   FOTORAMA RESPONSIVE STYLING
   ============================================
   Mobile adjustments for the Fotorama gallery component.
   Reduces sizes and adjusts spacing for smaller screens.
   ============================================ */

@media all and (max-width: 767px) {
  .fotorama__nav--dots {
    bottom: 0px;
  }
  .fotorama__nav--dots .fotorama__nav__frame {
    width: 35px;
  }
  .fotorama__dot {
    width: 15px;
    height: 15px;
  }
  .fotorama__nav__frame.fotorama__active .fotorama__dot {
    width: 15px;
    height: 15px;
  }
  .fotorama__nav__frame.fotorama__active .fotorama__dot:before {
    width: 10px;
    height: 10px;
    top: 1px;
  left: 1px;
  }
  .fotorama__caption {
    padding: var(--spacing-lg) 25px;
    width: 95% !important;
    top: 20px !important;
    min-height: 290px !important;
  }
  .fotorama__select {
    line-height: 20px!important;
    font-size: 14px!important;
  }
  .fotorama__btn {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs);
  }
}

/* ============================================
   FOOTER
   ============================================
   Website footer styling including navigation links, social media icons,
   and back-to-top button functionality.
   ============================================ */

footer {
  background-color: var(--color-bg-light);
  font-family: var(--font-family-ubuntu);
}

/* Decorative orange line before footer links */
footer ul:before {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 55px;
  background-color: var(--color-primary);
  position: absolute;
  margin-left: -10px;
}

footer ul li {
  list-style: none;
}

footer ul li a {
  color: var(--color-text-dark);
  transition: color var(--transition-fast);
}

footer ul li a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

footer ul li a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.social-links a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Back to top button - hidden by default, shown when scrolling */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--color-primary);
  color: var(--color-text-light);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-sticky);
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0;
  visibility: hidden;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: var(--color-primary-dark);
}

.back-to-top:focus {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.social-links {
  text-align: right;
}

/* Social media icon links */
.social-links a {
  color: var(--color-primary) !important;
  text-decoration: none;
  font-size: 20px;
  margin-right: 5px;
  transition: color var(--transition-fast);
}

.social-links a:hover {
  color: var(--color-text-dark);
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE OPTIMIZATIONS
   ============================================
   Global responsive adjustments for mobile devices.
   Ensures proper layout and functionality on smaller screens.
   ============================================ */

@media all and (max-width: 767px) {
  .nav-item {
    display: block;
    text-align: center;
    border-bottom: 1px solid var(--color-bg-gray);
    height: auto;
    line-height: 50px;
  }
  .social-links {
    text-align: center;
  }
  .login-link::before {
    display: none;
  }
  
  .navbar-brand {
    line-height: 60px;
  }
  
  .navbar-brand img {
    max-height: 50px;
    width: auto !important;
  }
  
  .sticky-top {
    position: relative;
  }
  
  header {
    margin-bottom: 40px;
  }
}

/* ============================================
   HOME PAGE SECTIONS
   ============================================
   Specific styling for home page sections including background images
   and section-specific button positioning.
   ============================================ */

#how-section {
  background-image: url(/app/image/imageimage?name=home-bg-gray.jpg);
  background-position: bottom left;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--color-bg-gray);
}

#solution-section a.btn {
  position: absolute;
  z-index: var(--z-tooltip);
  text-align: center;
  left: calc(50% - 56px);
  top: -20px;
}

#solution-section {
  background-image: url(/app/image/imageimage?name=home-bg-map.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#case-studies {
  background-image: url(/app/image/imageimage?name=home-bg-case-studies.png);
  background-position: left center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Home page mobile adjustments */
@media all and (max-width: 767px) {
  #our-solution {
    text-align: center;
  }
  #our-services {
    text-align: center;
  }
  
  #solution-section a.btn {
    position: relative;
    left: auto;
    top: auto;
    margin: var(--spacing-lg) auto;
    display: block;
  }
}

/* ============================================
   FORMS (JotForm Integration)
   ============================================
   Styling for form elements, likely from JotForm integration.
   Includes form groups, error states, and disabled states.
   ============================================ */

.jf-form{
  margin-top: 28px;
}

.jf-form > form{
  margin-bottom: 32px;
}

.jf-option-box{
  display: none;
  margin-left: 8px;
}

.jf-hide{
  display: none;
}

.jf-disabled {
    background-color: #eeeeee;
    opacity: 0.6;
    pointer-events: none;
}

/* Overwrite bootstrap default margin-left, because the <label> doesn't contain the <input> element. */
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: 0px;
}

div.form-group{
  padding: 8px 8px 4px 8px;
}

.mainDescription{
  margin-bottom: var(--spacing-sm);
}

p.description{
  margin:0px;
}

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

p.error, p.validation-error{
  padding: var(--spacing-xs);
}

p.error{
  margin-top: var(--spacing-sm);
  color: var(--color-error);
}

p.server-error{
  font-weight: bold;
}

div.thumbnail{
  position: relative;
  text-align: center;
}

div.thumbnail.selected p{
  color: var(--color-text-light);
}

div.thumbnail .glyphicon-ok-circle{
  position: absolute;
  top: 16px;
  left: 16px;
  color: var(--color-text-light);
  font-size: 32px;
}

.jf-copyright{color: #888888; display: inline-block; margin: 16px;display:none;}

/* Required field indicator */
.form-group.required .control-label:after {
    color: #dd0000;
    content: "*";
    margin-left: 6px;
}

.submit .btn.disabled, .submit .btn[disabled]{
  background: transparent;
  opacity: 0.75;
  cursor: not-allowed;
}

/* ============================================
   FORM LAYOUT & SELECT2 CUSTOMIZATION
   ============================================
   Form layout options for inline and column-based arrangements.
   Select2 dropdown library customization for consistent styling.
   ============================================ */

/* for image option with span text */
.checkbox label > span, .radio label > span{
  display: block;
}

.form-group.inline .control-label,
.form-group.col-1 .control-label,
.form-group.col-2 .control-label,
.form-group.col-3 .control-label
{
  display: block;
}

.form-group.inline div.radio,
.form-group.inline div.checkbox{
  display: inline-block;
}

.form-group.col-1 div.radio,
.form-group.col-1 div.checkbox{
  display: block;
}

.form-group.col-2 div.radio,
.form-group.col-2 div.checkbox{
  display: inline-flex;
  width: 48%;
}

.form-group.col-3 div.radio,
.form-group.col-3 div.checkbox{
  display: inline-flex;
  width: 30%;
}

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

/* Select2 library accessibility helper */
.select2-hidden-accessible{
	opacity: 0;
    width:1% !important;
}

/* Select2 dropdown styling */
.select2-container .select2-selection--single{
  height: 34px;
  padding-top: 2px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-fast);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  top: 4px;
}

/* ============================================
   CUSTOM FORMS CSS
   ============================================
   Custom form styling with minimal borders and brand colors.
   Overrides default Bootstrap form styles for cleaner appearance.
   ============================================ */

.selection {
  width: 100%;
}

/* Custom Select2 styling with minimal borders */
.select2-container--default .select2-selection--single {
  background-color: transparent !important;
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--color-bg-dark) !important;
  height: 34px !important;
  box-shadow: none;
  border-radius: 0px !important;
  transition: border-color var(--transition-fast);
}

.form-group.required .control-label:after {
  display: none;
}

/* Custom arrow styling for Select2 dropdown */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #fff transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #fff transparent !important;
}

/* Orange circle background for Select2 arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow b:before {
  content: '';
  display: inline;
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  border-radius: 50%;
  position: absolute;
  right: -9.5px;
  top: -12px;
  z-index: -1;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b:before{
  bottom: -12px;
  top: unset;
}

/* Custom form control styling with minimal borders */
.form-control {
  border-radius: 0px;
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-color: var(--color-bg-dark);
  transition: border-color var(--transition-fast);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* Textarea specific styling with full borders */
textarea.form-control {
  border-radius: var(--border-radius-sm);
    border-left: 1px solid var(--color-bg-dark) !important;
    border-top: 1px solid var(--color-bg-dark) !important;
    border-right: 1px solid var(--color-bg-dark) !important;
    border-color: var(--color-bg-dark);
}

/* ============================================
   OUR SOLUTION & SERVICES SECTIONS
   ============================================
   Styling for solution and services content boxes.
   Includes responsive container widths and positioning.
   ============================================ */

.box-style-1 {
  background-color: rgba(247, 247, 247, 0.84);
  position: absolute;
  z-index: var(--z-dropdown);
  transition: all var(--transition-normal);
}

/* Extra wide container for large screens */
@media (min-width: 1200px) {
  .container.wide {
      max-width: 1240px !important;
  }
}

/* Mobile adjustments for solution boxes */
@media all and (max-width: 767px) {
  .box-style-1 {
    position: relative;
    margin-top: 0px !important;
  }
}

/* ============================================
   OUR TEAM SECTION
   ============================================
   Team member card styling with hover effects and decorative arrows.
   Includes responsive adjustments for mobile devices.
   ============================================ */

.team-member h2 {
  font-size: 18px;
  text-align: center;
  font-family: var(--font-family-light);
  margin-top: 60%;
}

.team-member .card {
  border-radius: 0px;
  background: #f2f2f2;
  border-color: #f2f2f2;
  min-height: 220px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.team-member .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.team-member-inside h2 {
  margin-top: 70%;
}

/* Decorative orange arrow between team members */
.team-member-inside .col-md-4:after {
  content: '';
 position: absolute;
 left: 100%;
 top: 45%;
 width: 0;
 height: 0;
 border-top: 15px solid transparent;
 border-bottom: 15px solid transparent;
 border-left: 15px solid var(--color-primary);
 clear: both;

}

/* Mobile team section adjustments */
@media all and (max-width: 767px) {
  .team-member h2 {
    margin: 20px 0px;
  }
  
  .team-member .card {
    min-height: auto;
  }
}

/* ============================================
   CONTACT PAGE
   ============================================
   Contact page styling including grayscale map effect and
   contact information positioning.
   ============================================ */

iframe#map {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}

.contact-info {
  height: 500px;
  position: absolute;
  z-index: var(--z-tooltip);
  width: 25%;
  margin-left: 60%;
}

.contact-info p {
  font-family: var(--font-family-light);
  font-size: 13px;
}

/* Mobile contact page adjustments */
@media all and (max-width: 767px) {
  .contact-info {
    height: unset;
    position: relative;
    width: 100%;
    margin-left: 0px;
  }
  
  iframe#map {
    height: 300px;
  }
}

/* ============================================
   TERMS & POLICY PAGES
   ============================================
   Custom list styling for terms and policy content.
   Uses orange bullets instead of default list markers.
   ============================================ */

ul.orange-dots {
  list-style: none; /* Remove default bullets */
  padding-left: 20px;
}

ul.orange-dots li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: var(--color-primary); /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

/* ============================================
   LOGIN PAGE
   ============================================
   Login form styling with custom input fields and icons.
   Includes focus states and brand color integration.
   ============================================ */

.input-icon.lni {
    position: absolute;
    margin-top: 10px;
}

.form-signin .form-control {
  color: var(--color-text-gray);
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: none;
  padding-left: 30px;
  transition: border-color var(--transition-fast);
}

.form-signin .form-control:focus {
  border-color: var(--color-text-gray);
  box-shadow: none;
}

/* ============================================
   CASE STUDIES SECTION
   ============================================
   Case study card styling similar to team members.
   Includes hover effects and decorative orange arrows.
   ============================================ */

.case-studie h2 {
  font-size: 18px;
  text-align: center;
  font-family: var(--font-family-light);
  margin-top: 70%;
}

.case-studie .card {
  border-radius: 0px;
  background: #f2f2f2;
  border-color: #f2f2f2;
  min-height: 220px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.case-studie .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Decorative orange arrow between case studies */
.case-studie .col-md-4:after {
  content: '';
 position: absolute;
 left: 100%;
 top: 45%;
 width: 0;
 height: 0;
 border-top: 15px solid transparent;
 border-bottom: 15px solid transparent;
 border-left: 15px solid var(--color-primary);
 clear: both;

}

/* Mobile case studies adjustments */
@media all and (max-width: 767px) {
  .case-studie h2 {
    margin: 20px 0px;
  }
  
  .case-studie .card {
    min-height: auto;
  }
}

/* ============================================
   ADDITIONAL MENU LINKS
   ============================================
   Additional menu link styling for navigation elements.
   Includes active states and hover effects.
   ============================================ */

.menu-link {
	padding: var(--spacing-xs);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-normal);
}
.menu-link:hover {
	color: var(--color-secondary) !important;
}
.menu-link-active {
	border: 1px solid var(--color-primary);
	border-radius: var(--border-radius-sm);
}

/* ============================================
   ADDITIONAL MOBILE IMPROVEMENTS
   ============================================
   Enhanced mobile navigation and responsive adjustments.
   Improves mobile user experience with better spacing and layout.
   ============================================ */

@media all and (max-width: 768px) {
  .navbar-collapse {
    background-color: #fff;
    padding: var(--spacing-md);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .navbar-nav {
    margin: 0;
  }
  
  .nav-item {
    margin-right: 0;
    border-bottom: 1px solid var(--color-bg-gray);
  }
  
  .nav-item:last-child {
    border-bottom: none;
  }
  
  .nav-link {
    padding: var(--spacing-sm) var(--spacing-md);
    display: block;
  }
  
  .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    box-shadow: none;
    border: none;
  }
  
  .dropdown-item {
    padding: var(--spacing-xs) var(--spacing-lg);
  }
}

/* Small mobile device adjustments (phones) */
@media all and (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.3rem;
  }
  
  h3 {
    font-size: 1.1rem;
  }
  
  .section-title:after,
  .section-title-2:after,
  .section-title-3:after {
    display: none;
  }
  
  .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 14px;
  }
  
  .contact-info {
    padding: var(--spacing-md);
  }
}

/* ============================================
   END OF COACTIFY CSS
   ============================================
   This CSS file contains the complete styling system for the
   Coactify website. All styles use CSS custom properties for
   consistent theming and easy maintenance.
   
   For questions or modifications, refer to the CSS custom properties
   section at the top of this file for design system values.
   ============================================ */