:root {
     --purple: #662482;
    --mauve: #583e8c;
    --blue: #105b84;
    --dark: #222;
    
   --highlight: #2199ab;
    --grey: #35515C;
    --lightGrey: #EFEFEF;
    /* mobile menu */
    --transition-speed: 0.4s;
    --ease: cubic-bezier(0.25, 1, 0.5, 1);

}
html { scroll-behavior: smooth;}

header { position:fixed; top:0; left:0; }
header:before { transition:all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); box-shadow:0 0 12px rgba(0,0,0,0.2);content:""; position:absolute; left:0; top:-130px; background:#fff; height:100%; width:100%;  }
.scrolled header:before { top:0;   }

.headerLogo {  transition:all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); position:relative; left:0; top:0; width:300px; height:auto; }

@media screen and (max-width:480px){
    
    .headerLogo {  width:250px;  }

}
.scrolled .headerLogo {top:0; }
.st1{fill:var(--highlight);}.st3{fill:#fff;}

.scrolled .st3{fill:var(--dark);}


.avatar { width:100px; height:100px; object-fit:cover; border:5px solid #ccc; border-radius:50%; margin:0 auto; display:block; }


/* ==== hero overlay Graduation ===== */

        .heroOverlay { z-index:1; position:absolute; left:0; top:0; width:100%; height:100%;
        background: linear-gradient(90deg,rgba(35, 160, 176, 0.4) 0%, rgba(35, 160, 176, 0.1) 50%, rgba(102, 36, 130, 0.4) 100%);}

        .homeHeroOverlay { z-index:1; position:absolute; left:0; top:0; width:100%; height:100%;
        background: linear-gradient(90deg,rgba(35, 160, 176, 0.6) 0%, rgba(35, 160, 176, 0.4) 50%, rgba(102, 36, 130, 0.6) 100%);}

    
/* === =HOME ANIMATIONS ======= */

            .logoAnimation { transition:all 1s ease; z-index:10; width:200px; height:200px; position:relative; margin-bottom:40px; }
            .logoOuter, .logoInner, .logoText { position:absolute; left:0; top:0; width:100%; height:100%; }
            .logoOuter { animation: slowSpin 30s linear infinite;}
            @keyframes slowSpin {
              from {
                transform: rotate(0deg);
              }
              to {
                transform: rotate(360deg);
              }
            }
            .scrolled .logoAnimation { opacity:0; }
        
        
/* === animated headings ====== */

/* Base style for elements you want to reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  /* This controls the "smoothness" and "time" */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* Performance optimization */
}

/* The state triggered by JS */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.revealUp { transform: translateY(60px);}
.revealUp.active {
  transform: translateY(0);
}
.revealLeft {
  opacity: 0;
  transform: translatex(-100px);
  /* This controls the "smoothness" and "time" */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* Performance optimization */
}
.revealLeft.active {
  opacity: 1;
  transform: translateX(0);
}

.revealSpinUp {transform: translateY(60px) rotate(90deg);}
.revealSpinUp.active {
  transform: translateY(0) rotate(0);
}
.delay03 { transition-delay:0.3s;}

/* === animated headings ====== */

body {   font-family: "Titillium Web", sans-serif; overflow-x: hidden; color:var(--dark);}

.bgDark { background:#222; color:#fff;  }
.bgDark h3 { color:var(--highlight);  }

.bgPurple { background:var(--purple); color:#fff;  }
.bgMauve .btn { background:#fff; color:var(--mauve); }
.bgMauve .btn:hover {background:#fff; color:var(--mauve);opacity:0.7;}

.bgLightGrey { background:var(--lightGrey);   }
.bgBlue { background:var(--blue);  color:#fff;   }
.bgMauve { background:var(--mauve);  color:#fff;   }


main { background:#fff; padding:60px 0;  }


@media screen and (max-width:768px) {
    .content { padding:20px; }
    main { padding-top:30px;  }

}



/* === editable content ==== */

.editableContent h2, h3, h4  { margin-bottom:12px; padding-top:20px; }
.editableContent p  { margin-bottom:12px; }
.editableContent ul  { list-style:disc; padding-left:20px; }
.editableContent ul li { margin-bottom:12px;  }


/* === editable content ==== */


/* ========= ICONS ======= */

.iconList { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; padding:0; margin-bottom:30px;  }
.iconList li { list-style:none; text-align:left;  width:33.333%; padding:10px; }


/* ====== MODAL ========= */

/* The background overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px); /* This creates the blur effect */
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    z-index: 9999;
}

/* When the modal is active */
.modal-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* The modal box */
.modal-content {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    position: relative;
    width: 90%;
    max-width: 500px;
    transform: scale(0.7); /* Starts smaller for the "pop" effect */
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

/* Close button style */
.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #333;
}


/* === page hero ==== */

.pageHero { width:100%; display:flex;  position: relative;  height: 200px;  overflow: hidden;
background: #23A0B0;
background: linear-gradient(90deg,rgba(35, 160, 176, 1) 0%, rgba(35, 160, 176, 1) 50%, rgba(102, 36, 130, 1) 100%);}
.pageHeroContent { width:100%; max-width:1400px; margin:0 auto; position:relative;  }
.pageHero img { width:100%; height:100%; object-fit:cover; }
.pageHero h1 { font-size:60px;position:absolute; left:40px; bottom:0; color:#fff; z-index:10; }


@media screen and (max-width:480px) {
.pageHero h1 { font-size:32px; left:20px; bottom:28px; }
.pageHero { height:150px; } 
}
.grad { position:absolute; left:0; bottom:0; width:100%; height:250px; z-index:1;
    background: #333; 
background: linear-gradient(0deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

.parallax-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* Extra height so it has room to move */
  object-fit: cover;
  will-change: transform; /* Optimizes performance */
  
  /* The JS will update the --scroll variable */
  transform: translateY(calc(var(--scroll, 0) * 0.5)); 
}




/* Stop scrolling the body when menu is open */
body.no-scroll { overflow: hidden; }





/* ==== forms ===== */

form { max-width:600px; margin:0 auto;text-align:left; }
label { display:block; margin-bottom:6px; font-size:16px; }
input[type="text"], textarea { -webkit-appearance: none;  text-align:left; border-radius: 8px;outline: none; width:100%; padding:10px; border: 1px solid #efefef;  background:#fff; box-shadow:0 0 12px rgba(0,0,0,0.1); margin-bottom:20px; }
form .error { color:red; }
select { border: 1px solid #efefef; background:#fff;  padding: 10px 20px; border-radius: 5px;}
input.btn { border:none;cursor:pointer; }




        
/* === FOOTER NAV ======== */
footer a {text-decoration:none; }
footer nav ul { display:flex; align-items:center; justify-content:center;  }
footer nav li a { padding:4px 12px;  }
footer nav li:first-child a { padding-left:0; }
footer a:hover,
footer nav li a:hover { color:var(--highlight); }

@media screen and (max-width:480px) {
    footer nav ul { flex-direction:column;  }
    footer nav li a { padding-left:0; }

    
}
/* ====== cards ====== */
.fullwidthCard {  box-shadow:0 0 12px rgba(0,0,0,0.2); border-radius:12px; background:#fff; padding:20px;}

.cards { display:grid; gap:30px; margin-bottom:30px; }

@media screen and (min-width:481px) {
.cards3 { grid-template-columns: repeat(3, 1fr); }
.cards4 { grid-template-columns: repeat(4, 1fr); }
.cards5 {grid-template-columns: repeat(5, 1fr); }
}

.cards li { box-shadow:0 0 12px rgba(0,0,0,0.2); border-radius:12px; background:#fff; padding:20px;}
.cards li img { width:100%; aspect-ratio:16/9; margin-bottom:20px; object-fit:cover;}
.cards li a { text-decoration:none; }

.cards a,
.cards a div { display:flex; flex-direction:column; height:100%; align-items:flex-start;  }
.cards .btn { margin-top:auto; }


@media screen and (max-width:480px) {
    .cards { display:block; }
.cards li { margin-bottom:30px; }

}


/* ==== blog ===== =*/

.tagSml { font-size:12px;background:#efefef; border:1px solid #ccc; text-decoration:none; border-radius:5px; padding:4px 6px; margin-right:5px; } 
.tagSml:hover { background:#ccc; }

h1,h2, h3, h4 { font-weight:700;}

h1, .h1 { font-size:48px;  line-height:120%;text-transform:uppercase;  }
h2, .h2 { font-size:24px;line-height:100%; text-transform:uppercase;  }
h3, .h3 { font-size:20px; color:var(--highlight); }
h4, .h4 { font-size:16px; }
a { color:inherit; }

.introtext { font-size:24px;font-family: "Titillium Web", sans-serif; text-transform:none;line-height:140%; }

@media screen and (max-width:480px) {
    h1 { font-size:36px;  }

}
/* === =buttons ======= */

@media screen and (min-width:481px) {
    .liveChat { position:fixed; bottom:20px; right:40px;z-index:20; }
}

@media screen and (max-width:480px) {
    .liveChat { position:fixed; top:80px; right:20px;z-index:20; }
}

.btn { background:var(--purple); color:#fff; text-transform:uppercase;  font-size:12px; padding: 10px 24px 8px 24px; border-radius:40px; text-decoration:none; display:inline-block; }
.btnWide { width:100%; }
.btn:hover { background:var(--mauve); }

/* =============== footer ============ */
footer { background:var(--dark); color:#fff; }