*,*::before, *::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-blue: #1E90FF; /* Branding & CTA buttons */
  --dark-blue: #000080; /* Headers, buttons, strong accents */
  --light-blue: #ADD8E6; /* Backgrounds, hover effects */
  --steel-blue: #4682B4; /* Subtle, techy feel */
  --lighter-blue: #badae385;
  
  --black: #000000; /* Strong contrast, headings, footer */
  --dark-grey: #333333; /* Readability for text */
  --light-grey: #a6a4a4; /* Dividers, borders, subtle backgrounds */
  --white: #FFFFFF; /* Clean background and contrast */
   --soft-white: #ffffffbe; 
   --stone-white: 	#E5E4E2;
  --crimson-red: #DC143C; /* Sale banners, urgent notifications */
  --light-crimson-red: #edc6ce;
  --tomato-red: #FF6347; /* Lighter alternative for warnings */
  
  --emerald-green: #50C878; /* Success messages, positive indicators */
  --light-emerald-green: #adffc8;
  --teal-green: #008080; /* Subtle, professional green-blue tone */
  
  --gold-yellow: #FFD700; /* Premium feel, highlights, badges */
  --mustard-yellow: #FFDB58; /* Soft, warm alternative for highlights */
--soft-gradient: linear-gradient(135deg, #F0F8FF, #ADD8E6, #badae385);
--hard-gradient: linear-gradient(135deg, #418ed1, #ADD8E6, #1fa2c6f1);

     /* ===========font families =========== */
     --font-body: 'Inter', sans-serif; /* Clean, modern, and readable */
     --font-heading: 'Montserrat', sans-serif; /* Bold, strong presence */
     --font-special: 'Space Mono', monospace; /* For special highlights, code, or futuristic feel */
}

html, body {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--dark-grey);
  background-color: var(--white);
  line-height: 1.6;
  min-height: 100svh;
  scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;

}

section,footer,main{
  overflow: hidden;
}


.monitor-container{
  width: 100%;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dark-blue);
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
}
a{
  display: block;
  padding: .7em .8em;
}
p {
  margin-bottom: .6em;
}

/* ========= fluuid typography no need to handle text with meadia quaeries */
h1 {
  font-size: clamp(2rem, 5vw, 3rem); /* Between 32px and 48px */
}
h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.3rem); /* Between 28px and 40px */
}
h3 {
  font-size: clamp(1.4rem, 4vw, 2rem); /* Between 25px and 35px */
}
h4 {
  font-size: clamp(1.4rem, 3.5vw, 2rem); /* Between 22px and 32px */
}
h5 {
  font-size: clamp(1.2rem, 3vw, 1.8rem); /* Between 19px and 28px */
}
h6 {
  font-size: clamp(1.4rem, 2.5vw, 1rem); /* Between 16px and 25px */
}
p {
  font-size: clamp(1rem, 2vw, 1.2rem); /* Between 16px and 19px */
  line-height: 1.6;
  color: var(--black);
}


/* helps imge relax inside containers */
img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
   display: block;
}

button {
  font-family: var(--font-special);
  padding: 0.7em 1.2em;
  font-weight: bold;
  color: var(--white);
  background-color: var(--primary-blue);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 3px 3px 10px var(--light-grey);
   transition: all 0.3s ease;
}
button:hover {
  opacity: .85;
}

button:active{
  opacity: .7;
}

a {
  text-decoration: none;
  color: var(--primary-blue);
  transition: 0.3s;
  font-weight: 700;
  cursor: pointer;
}
a:hover {
  color: var(--steel-blue);
}

   input{
   display: block;
   width: 100%;
   padding: .75em 1.2em;
   border-radius: .2rem;
   border: 1px solid var(--steel-blue);
   outline: none;
   transition: all 550ms ease;
   background-color: var(--white);
   margin: .5em 0;
  }

  select{
  width: 100%;
  padding: .75em 1.2em;
  border-radius: .2rem;
   border: 1px solid var(--steel-blue);
  font-size: 1rem;
  margin: 1em 0;
  outline: none;
  transition: border-color 0.3s ease;
  }

     input:focus{
    outline: none;
  border: 1px solid var(--primary-blue);
   }

  select:focus{
      border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.2); /* soft blue glow */
  }
   


.cursor-pointer{
  cursor: pointer;
}




/* ======== COLOR UTILITIESS ====== */
/* Background Colors */
.bg-primary-blue { background-color: var(--primary-blue); }
.bg-dark-blue { background-color: var(--dark-blue); }
.bg-light-blue { background-color: var(--light-blue); }
.bg-steel-blue { background-color: var(--steel-blue); }
.bg-lighter-blue { background-color: var(--lighter-blue); }

.bg-black { background-color: var(--black); }
.bg-dark-grey { background-color: var(--dark-grey); }
.bg-light-grey { background-color: var(--light-grey); }
.bg-white { background-color: var(--white); }
.bg-stone-white { background-color: var(--stone-white); }

.bg-crimson-red { background-color: var(--crimson-red); }
.bg-tomato-red { background-color: var(--tomato-red); }
.bg-light-crimson-red { background-color: var(--light-crimson-red); }

.bg-emerald-green { background-color: var(--emerald-green); }
.bg-teal-green { background-color: var(--teal-green); }
.bg-light-emerald-green { background-color: var(--light-emerald-green); }

.bg-gold-yellow { background-color: var(--gold-yellow);}
.bg-mustard-yellow { background-color: var(--mustard-yellow);}

/* Text Colors */
.text-primary-blue { color: var(--primary-blue); }
.text-dark-blue { color: var(--dark-blue); }
.text-light-blue { color: var(--light-blue); }
.text-steel-blue { color: var(--steel-blue); }
.text-lighter-blue { color: var(--lighter-blue); }

.text-black { color: var(--black); }
.text-dark-grey { color: var(--dark-grey); }
.text-light-grey { color: var(--light-grey); }
.text-white { color: var(--white); }
.text-stone-white {color: var(--stone-white);}

.text-crimson-red { color: var(--crimson-red); }
.text-tomato-red { color: var(--tomato-red); }

.text-emerald-green { color: var(--emerald-green); }
.text-teal-green { color: var(--teal-green); }

.text-gold-yellow { color: var(--gold-yellow); }
.text-mustard-yellow { color: var(--mustard-yellow); }

.fill-red{fill: var(--crimson-red);}
.fill-dark-blue{fill: var(--dark-blue);}

/* =======global css layout utilities == */
/* to center contents on wider screen(monitors) 
its nicde to have only one global css for this for easy manioulation 
across web pages
*/


/* keeps displaying through out site hade to put it here */

.logo-container{
  width: 10vw;  
  height: 4vw; 
  min-width: 100px;     /* or use % based on parent */
  max-width: 250px; 
  opacity: 0;  /* Logo is initially invisible */
  animation: fadeIn 2s forwards;
}



/* general keysframes */
header span{
   transform: translateX(50%);
   animation: slideBack 2s forwards;
}

@keyframes slideBack {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
     transform: translateX(0%);
  }
}

/* Define the keyframes for fade-in */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

svg{
  transition: all 0.3s ease-in-out;
  width: 100%;/*allows the icon to grow and shrinks*/
  max-width: 23px;
}

.reset-btn-style{
  background-color: transparent;
  box-shadow: none;
}
.reset-btn-style:hover{
  background-color: transparent;
}

.w100{
  width: 100%;
}

/* ====== DISPLAYS ===== */
.d-flex{display: flex;}
.d-grid{display: grid;}
.d-block{display: block;}
.d-inline-b{display: inline-block;}

/* FLEX DIRECTION */
.flex-column{flex-direction: column;}
.flex-row{flex-direction: row;}

/* DISPLAY CENTERS */
.flex-center{ display: flex; align-items: center; justify-content: center;}
.grid-center{display: grid; place-items: center;}
.block-center{display: block; margin-inline: auto;}


/* FLEX PLACEMENTS */
.justify-start{justify-content: start;}
.justify-center{ justify-content: center; }
.justify-s-between{justify-content: space-between;}
.justify-s-around{justify-content: space-around;}
.justify-s-evenly{justify-content: space-evenly;}
.justify-end{justify-content: end;}
.align-start{align-items: start;}
.align-center{align-items: center;}
.align-end{align-items: end;}



/* GRID PLACEMENTS */
.place-i-center{place-items: center;}
.place-i-start{place-items: start;}
.place-i-end{place-items: end;}
.place-s-center{place-self: center;}
.place-s-start{place-self: start;}
.place-s-end{place-self: end;}


/*  TEXT PLACEMENT UTILITIES */
.text-start{ text-align: start; }
.text-center{ text-align: center; } 
.text-end{ text-align: end; }

/* MARGIN UTILIS */
.M   { margin: 0.5rem; }   /* small */
.MS  { margin: 1rem; }     /* medium */
.ML  { margin: 1.5rem; }   /* large */
.MXL { margin: 2rem; } 

/* random utilities */
.text-icon-container{
  display: flex;
  align-items: center;
}

.text-icon-container span{
   margin: 0  ;
}

.FWB{ font-weight: 700;}
.w-100{width: 100%;}

/* == STYLES FOR HTML ELEMENTS THAT APPEAR ACROSS THE PAGE=== */


.pop-up-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 1000;
  overflow-y: scroll;
  transition: all 0.3s ease;
  padding: 1.5em 1em;
   scrollbar-width: none;


  /*hide at first*/
    opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}
/* Show popup */
.pop-up-container.show {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}
.pop-up-container.hide {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}

.pop-up-container::-webkit-scrollbar {
  display: none;
}

.popup-box{
  background-color: var(--white);
  padding: 1em;
  display: flex;
  border-radius: .5rem;
  width: 100%;
  max-width: 650px;
}




.notification-container{
  width: 100%;
  max-width: 400px;
  padding: .3em 1em;
  place-self: center;
  position:  fixed;
  top: .5em;
  box-shadow: 3px 3px 8px var(--light-grey);
  border-radius: .5rem;
  background: var(--white);
  z-index: 3000;
  transition: all 300ms ease;
  margin: 0 1em;
  left: -50%; 
  right: -50%;
}
.notification-container p{
  font-size: .9rem;
}

.notification-container.show{
   transform: translateY(0);
}

.notification-container.hide{
   transform: translateY(-200%);
}




.around-campus-logo-container{
  width: 45px;
  aspect-ratio: 1;
  border-radius: .5rem;
  margin: 0em;
}

.around-campus-logo-container-wrapper{
  padding: 0;
}

/* ====== FOOTER STYLES ========*/

.footer-logo-container{
  width: 70px;
  aspect-ratio: 1;
  border-radius: .5rem;
  margin: 1em;
}

footer{
padding: 1em 1.5em;
background-color: var(--light-blue);
}

footer input{
  padding: .8em 1em;
  font-size: 1rem;
  width: 100%;
  border-radius: .2rem;
  border: 1.5px solid var(--light-grey);
  transition: all 250ms ease ;
}
footer input:focus{
  outline: none;
  border: 1.5px solid var(--dark-blue);
}

.upper-footer-container{
  padding: 2em 0;
}

.newsletter-container{
  width: 100%;
  max-width: 650px;
}

.newsletter-container button{
  margin: 1em 0;
}
 
.terms-conditions-contaner input{
  width: fit-content;
  margin: .5em;
 
}
.terms-conditions-contaner{
  line-height: 1.3;
  margin-top: 1em;
}

.second-footer-container{
  padding: 1em 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  place-items: start;
  max-width: 1300px;
  margin: 0 auto;
}

.second-footer-container >*{
  padding: .2em;
  margin: .5em 0;
}

.second-footer-container ul{
  list-style: none;
}

/* === FOOTER SOCIAL LINKS ICON */
.icon-links-container{
  padding: 1em 0;
}

.socials-container{
  list-style: none;
  
}

.socials-container li{
  border-radius: 50%;
  margin-inline: .5em;
}
.socials-container li a{
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 60px;
  border: 1px solid var(--dark-grey);
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  /* background-size: fill; */
  background-position: center;
}

.socials-container li a:hover{
transform: scale(1.1);
border: 3px solid var(--dark-blue);
}

.facebook-link-icon{
  background-image: url(../images/social-media/facebook.png);
}


.linkedin-icon{
  background-image: url(../images/social-media/linkedin.png);
}

.x-link-icon{
  background-image: url(../images/social-media/twitter.png);
}


.payment-methods-icon-container{
  list-style: none;
}

.payment-methods-icon-container li{
  border-radius: 50%;
  margin-inline: .5em;
}
.payment-methods-icon-container li a{
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 70px;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.sidebar-btn-icon{
   fill: var(--black);
   transform: scale(1.1);
   transition: opacity 0.3s ease;
   
}

.sidebar-btn{
   background-color: var(--white);
   display: none;
   margin: 0;
   padding: .2em;
   position: fixed;
   z-index: 100;
   right: 1em;
   /* overflow: hidden; */
}

/* .hide-icon{
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease;
} */



.payment-methods-icon-container li a:hover{
  transform: scale(1.1);
  box-shadow: 5px 5px 10px var(--light-grey);
}

.cash-on-delivery-icon{
  background-image: url(../images/payment/cash-on-delivery.png);
}

.master-card-icon{
  background-image: url(../images/payment/logo.png);
}

.visa-icon{
  background-image: url(../images/payment/visa.png)
}
.wallet-icon{
  background-image: url(../media/payments-icons-png/wallet.png);
}
.center-mobile{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }


@media(max-width: 1200px) {
  /* footer responsive */
.upper-footer-container{
  flex-direction: column;
  align-items: center;
  margin: 1.5em 0;
}


.icon-links-container{
  flex-direction: column;
  align-items: center;
  
}

.socials-container{
  margin: 1em;
}
}

@media(max-width: 500px){
  footer div>*{
    text-align: center;
  }

}


/* =============== CLASSLISTS ANIMATION ============= */
.slide-down{
  animation: slideDown 0.4s ease forwards;
}
.slide-up{
  animation: slideUp 0.4s ease forwards;
}
/* Animation Keyframes */
@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(50px);
    opacity: 0;
  }
}