/********************************/
/*PROGRAMMING TIPS**********
EXAMPLE FOOTER with inline fixes due to section overlaps
When a footer overlaps the section above it on narrow screens, it usually means the 
parent container or section isn’t leaving enough vertical space, or the flex alignment
 is forcing elements to collapse. The simplest fix is to give the footer clear separation
 with margin/padding and ensure it’s responsive.

Here’s how you can adjust your footer with inline CSS so it won’t overlap:
<footer class="bg-dark text-white text-center" 
        style="position: relative; clear: both; width: 100%; padding: 20px 0; margin-top: 40px;">
  <div class="container">
    <p style="margin: 0; font-size: 0.9em;">
      © 2025 Askopoly. All rights reserved.
    </p>
  </div>
</footer>
Key Inline CSS Fixes
position: relative; 
→ prevents the footer from overlapping content above (instead of absolute/fixed).
clear: both; → ensures it sits below any floated or flexed elements.
margin-top: 40px; → adds breathing room above the footer.
padding: 20px 0; → ensures the footer content has vertical space inside.
width: 100%; → makes it span the full width on all screen sizes.
*/
/*MENU ***************/
/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* Optional fade-in effect */
.dropdown-menu {
  transition: opacity 0.2s ease;
  opacity: 0;
  visibility: hidden;
}

.nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

/* ASKO COLOR THEME*********************** */
/* 
Background: 
Background: #E8D9C4 (Warm Sandstone Beige)

Primary CTA / Accents: #D98555 (Muted Burnt Orange)

Headers / Highlights: #7E5A9B (Smoky Grape Purple)

Text / Contrast: #3E3E44 (Slate Charcoal)
*/ 

/*****************************/
.Asko-body {
background-color: rgb(251, 251, 251);
}
/*.hero-section {
  background-image: url("./images/Asko_MainIcon.svg");
/*  background: url('images/Asko_MainIcon.svg') center center / cover no-repeat;
  /*background-color: blue;*/
/*  height: 100vh;
}*/
/* HERO SECTION */
.hero-section {
  background-image: url('AskoNetwork1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 90vh;
  margin-bottom: 0px;
}
.info-section {
  background-color: rgb(251, 251, 251);
  height: 90vh;
}

.hero-color {
  background-color: #660066;
  color: white; /* ensures good contrast */
  padding: 60px 20px; /* generous spacing */
  text-align: center;
  border-radius: 20px; /* optional: soft rounded edges */
  max-width: 50%;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .hero-color {
    padding: 40px 15px;
    font-size: 1rem;
    max-width: 90%; /* allows full width within the max-width constraint */
  }
}

/* ASKO COLORS */
.asko-plum {
  color: #660066;
}
.asko-charcoal {
  color: #36383a;
}

/* BUTTONS ............................*/
/* ORANGE BUTTON ................*/

.btn-asko {
  border: none;
  padding: 0.75rem 1.5rem;
  margin-top: 0.75rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.thing-peach {
  background-color: #FFB07C;  /* Muted orange */
  color: #2E1A47;
}
.thing-peach:hover{
  background-color: #FF9A5C;
}

.thing-peach:focus {
  background-color: #E67A3C;  /* ; bold burnt peach */
  color: #1A0D2B;              /* darker plum text */
  transform: translateY(0);    /* pressed down */
}
.thing-blue {
  background-color: #89A7C2; 
  color: #1A1A1A;
}
.thing-blue:hover {
  background-color: #6F8FAE;
}
.thing-blue:focus {
  background-color: #4F6D8C;  /* ; bold burnt peach */
  color: #E0E0E0;              /* darker plum text */
  transform: translateY(0);    /* pressed down */
}
.thing-rose {
  background-color: #E68CA7;  
  color: #2E1A47;
}
.thing-rose:hover {
  background-color: #D46C8C;
}
.thing-rose:focus {
  background-color: #B84C6E;  /* ; bold burnt peach */
  color: #1A0D2B;              /* darker plum text */
  transform: translateY(0);    /* pressed down */
}


/*.btn-asko:hover {
  /*background-color: purple;  /* Slightly darker on hover */
  /*background-color: rgb(255, 105, 190);
  background-color: #FF9A5C;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}*/

/*.btn-asko:active {
  background-color: #b85f29;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}*/

/*.btn-asko:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 123, 57, 0.4);
}
.Asko-a:hover {
  color: #b400cc !important;/* Optional: darker pink on hover 
}*/
/* ORANGE BUTTON ................*/

/* OLD FROM CHAT
.Asko_hero-text {
  background-image: url('/Askopoly/images/AskoNetwork1.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
}*/

/* IQCAPACITY CSS ********************/
html {
  scroll-behavior: smooth;
}

body {
  background-color: #FAFAFE;/*#ffffff #fafafa#F6F6F6 #f7f7ff;*/
}
.IQborder-light-gray{
    border-color: #d6d6d6 !important;
}
.IQicon-style {
  width: 100px !important;               /* Icon-style size */
  max-width: 100%;
  height: auto;
  border: 1px solid #d6d6d6;  /* Light grey border */
  border-radius: 12px;        /* Rounded corners */
  padding: 8px;               /* Space inside border */
  background-color: #fff;     /* Optional: white background inside border */
}
.IQMarkText {
  color: black;
  font-weight: 250;
  font-size: 1rem;
  margin-bottom: 10px;
}
.IQLogoText {
  color: rgba(8, 3, 3);//IQ svg is 255,0,102
  font-family:  'Segoe UI', sans-serif;
  font-weight: 350;
  font-size: 2rem;
  margin-bottom: 10px;
  margin-left: 10px;
}
.IQHeroImg { 
  /*max-width: 75%; /* Shrinks image by 25% */
  background-color: #ffffff;
  height: auto;
}
.bordered-20-grey{
  border: 20px solid #4D4D4D;
}
.padded-lr-20-grey{
  padding: 0px 25px;
}
.bordered-20-pink{
  border: 20px solid hotpink !important;
}

/*.svg-bordered {
  border: 2px solid #000;   /* Set border width and color */
  border-radius: 8px;       /* Optional: rounded corners */
  padding: 4px;             /* Optional: spacing between image and border 
}*/

/*a THIS MAKES ALL LINKS PINK {
  color: #ff007f !important;
} */
.IQbtn {
  background-color: #FF0066;/* rgb(255,0,102)*/
}
.iqPinkText{
   color: #FF0066 !important;/* #B52EDA rgb(255,0,102)*/
}
.iqPdarkText{
  font-weight:350 !important;
  color:black !important; 
}
/*a:hover {
  color: #cc0066 !important;/* Optional: darker pink on hover 
}*/

/*START - SERVICES SECTION STYLES:*/
    .IQbody {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f8f9fa;
      color: #212529;
    }

    .IQhero-section {
      background-color: #ffffff;
      padding: 4rem 1rem;
      border-bottom: 1px solid #dee2e6;
    }

    .IQhero-title {
      font-size: 2.5rem;
      font-weight: 600;
    }

    .IQservice-content h3 {
      margin-top: 2rem;
      font-weight: 600;
    }

    .IQsidebar {
      position: sticky;
      top: 2rem;
      padding: 2rem;
      background: #ffffff;
      border: 1px solid #dee2e6;
      border-radius: 0.5rem;
    }

    .IQbtn-primary {
      background-color: #0056b3;
      border: none;
    }

    .IQbtn-primary:hover {
      background-color: #003d80;
    } 
/*
   body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f8f9fa;
    }
    .hero {
      background-color: #001f3f;
      color: white;
      padding: 6rem 2rem;
    }
    .hero h1 {
      font-size: 3rem;
      font-weight: 700;
    }
    .hero p.lead {
      font-size: 1.25rem;
      margin-bottom: 2rem;
    }
    .btn-primary {
      background-color: hotpink; // #00b894;
      border: none;
    }
    .btn-secondary {
      background-color: #0984e3;
      border: none;
    }
    .brand-logos img {
      max-height: 40px;
      margin: 0 1rem;
      opacity: 0.8;
    }

.intro{
  display: flex;
  justify-content: center;
  align-items: center;

}
.gradient-background {
  background: linear-gradient(300deg, #00bfff, #ff4c68, #ef8172);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.icon-square {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
}

.profile-img {
  height: 100px;
  border-radius: 50%;
}
*/