/*=======BOARDERS SYSTEM==========*/
:root {
--card-border-width:0;
--images--border-radius: 0.375rem;
--cycle--border-radius: 50%;
--button-border-width: 1px;
/*--border-color: #{$border-color};*/
}
/* Remove ALL borders from card and image inside this section */
.section--grey .card,
.section--grey .card-body,
.section--grey .card-header,
.section--grey .card-footer,
.section--grey .card img,
.section--grey--nohover .card,
.section--grey--nohover .card-body,
.section--grey--nohover .card-header,
.section--grey--nohover .card-footer,
.section--grey--nohover .card img,
.section--white .card,
.section--white .card-body,
.section--white .card-header,
.section--white .card-footer,
.section--white .card img,
.section--white--nohover .card,
.section--white--nohover .card-body,
.section--white--nohover .card-header,
.section--white--nohover .card-footer,
.section--white--nohover .card img{
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;            /* remove any shadow that looks like border */
}

/* Prevent image border even more aggressively */
.section--grey .card img,
.section--grey--nohover .card img,
.section--white .card img,
.section--white--nohover .card img,
img.img-fluid {
  border: 0 !important;
  border-radius: var(--images--border-radius) !important;
}

.card img,
#stepCarousel,
.image-box-value,
img {
  border-radius:var(--images--border-radius);
}

.step-btn{
  border-width: var(--card-border-width);
}

.step-btn{
  width:30px;
  height: 30px;
  border-radius:var(--cycle--border-radius);

}
.navbar .btn,
.card-body .btn-lg{
  border-width: var(--button-border-width)!important;
}

/*======TYPOGRAPHY SYSTEM=========*/
:root {
  /* Primary = Inter for body, links, buttons, nav items */
  --bs-body-font-family: "Inter", system-ui, -apple-system, serif;
  --bs-font-sans-serif: var(--bs-body-font-family);
  /* fallback */

  /* Secondary = Montserrat only for headings */
  --bs-headings-font-family: "Montserrat", system-ui, -apple-system, sans-serif;

  /* Your existing variables (keep these) */
  --font-primary: "Inter", system-ui, -apple-system, serif;
  --font-secondary: "Montserrat", system-ui, -apple-system, sans-serif;

  --fs-body: 16px;
  /*--fs-h1: 32px;*/
  --fs-h1: 24px;
  --fs-h2: 19px;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* 2. Base document */
body {
  font-family: var(--bs-body-font-family)!important;
  font-size: var(--fs-body)!important;
  line-height: var(--line-height-body)!important;
  font-weight: var(--fw-normal)!important;
}

/* 3. Headings get Merriweather */
/*h1,
.h1{
  font-family: var(--bs-headings-font-family)!important;
  font-weight: var(--fw-medium)!important;
}*/
h1,
.h1 {
  font-family: var(--bs-headings-font-family)!important;
  font-weight: var(--fw-semibold)!important;
}

h2,
.h2 {
  font-family: var(--bs-headings-font-family)!important;
  font-weight: var(--fw-medium)!important;
}

h3,
.h3{
  font-family: var(--bs-headings-font-family)!important;
  font-weight: var(--fw-semibold)!important;
}
h4,
.h4,
h5,
.h5 {
  font-family: var(--bs-headings-font-family)!important;
  font-weight: var(--fw-bold)!important;
}

/* 4. NAV */
.nav-link{
    font-family: var(--bs-body-font-family) !important;
    font-weight: var(--fw-normal) !important;
}
#collapseMenu .nav-link{
  font-family: var(--bs-body-font-family) !important;
  font-weight: var(--fw-bold) !important;
}

#collapseMenu .bottom-side-menu .nav-link{
  font-family: var(--bs-body-font-family) !important;
  font-weight: var(--fw-light) !important;
}

.top-right-menu .nav-link,
.navbar .top-right-menu a  {
  font-weight: var(--fw-bold) !important;
}
/* Buttons */
a.btn,
.step-btn {
  font-family: var(--font-primary) !important;
  font-weight: var(--fw-medium) !important;
}

/*======WEBSITE COLOUR PATTERN======*/
:root {
  --bs-primary-light: #f4f6f8;
  /* More variations 
  --darker-1:#e0e4e9;    
  --darker-2:#ccd3dc;   
  --darker-3:#b0bac7;    
  --darker-4:#8a98a8;    
  --darker-5:#5f6f84;    
  --darker-6:#3c4a5a;
  --darker-7:#2a343f;
  --darker-8:#1c242c;
  --darker-9:#11171c;
  --darker-10:#0a0f14;*/

  --bs-first-text:#3c4a5a;
  --bs-second-text:#8a98a8;
  --bs-first-accent: #1a3c8e;

  --bs-second-accent: #1fc9c4;
  --bs-third-accent: #ffd95b;

  --bs-first-background:#fff;
  
}

/*Buttons Gradient*/
.section--grey .gradient-btn,
.section--white .gradient-btn,
.section--grey--nohover .gradient-btn,
.section--white--nohover .gradient-btn,
.step-btns{
  background: linear-gradient(
  90deg,
  var(--bs-first-accent) 0%,
  var(--bs-second-accent) 50%,
  var(--bs-second-accent) 100%
);
  border-color: none!important;
  border: none !important;
  position: relative;
  overflow: hidden;
  color: var(--bs-primary-light);
  background-size: 180% 180%;
  animation: gradient-animation 7s ease infinite;
}

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

.section--grey .gradient-btn:hover,
.section--white .gradient-btn:hover,
.section--grey .gradient-btn:focus,
.section--white .gradient-btn:focus,
.section--grey .gradient-btn:active,
.section--white .gradient-btn:active,

.section--grey--nohover .gradient-btn:hover,
.section--white--nohover .gradient-btn:hover,
.section--grey--nohover .gradient-btn:focus,
.section--white--nohover .gradient-btn:focus,
.section--grey--nohover .gradient-btn:active,
.section--white--nohover .gradient-btn:active,

.step-btn:hover,
.step-btn:focus,
.step-btn:active{
  border-color: var(--bs-second-accent) !important;
  border: 1px solid var(--bs-second-accent) !important;
  background: none;
  color: var(--bs-second-accent) !important;
  font-weight: var(--fw-semibold)  !important;
}

/*  Default state: card background = primary light */
.section--grey--nohover .card {
  background-color: var(--bs-primary-light) !important;
  transition: background-color 0.25s ease;   /* smooth change */
}

.section--white--nohover h3 {
  color: var(--bs-first-text);
}


/*  Default state: card background = primary light */
.section--grey .card {
  background-color: var(--bs-primary-light) !important;
  transition: background-color 0.25s ease;   /* smooth change */
}

/*  On hover (card or image): background = first accent */
.section--grey .card:hover {
  background-color: var( --bs-first-background) !important;
}

/* Optional: also change text color on hover */
.section--grey .card:hover .card-title,
.section--grey .card:hover .card-text {
  color: var(--bs-first-accent) !important;                 /* or any color you want on accent bg */
}

/*  On hover (card or image): background = first accent */
.section--white .card:hover {
  background-color: var( --bs-primary-light) !important;
}
.section--white .card a {
  text-decoration: none;                /* or any color you want on accent bg */
}
/* Optional: also change text color on hover */
.section--white .card:hover .card-title,
.section--white .card:hover .card-text,
.section--white .card:hover a{
  color: var(--bs-first-accent) !important; 
  text-decoration: none;                /* or any color you want on accent bg */
}

.section--white h3{
  color: var(--bs-first-text);
}


.section--CTA {
  background-color: var(--bs-first-accent)!important;
}
.section--CTA h1,h2{
  color:var(--bs-first-background)!important;
}

.section--CTA p {
  color:var(--bs-primary-light)!important;
}


/*CTA button*/
/* CTA Button - Normal State */
.section--CTA .btn a,
.section--CTA .btn .btn-sm {
    /* Force full button look */
    display: inline-block !important;
    padding: 0.5rem 1.25rem !important;
    text-decoration: none !important;
    transition: all 0.35s ease !important;

    /* Explicitly restore + set border */
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--bs-first-background) !important;
    background-color: var(--bs-first-accent) !important;
    color: var(--bs-primary-light) !important;
    border-width: var(--button-border-width)!important;
    border-radius: 0.375rem !important; 
    
}

/* Hover State - Everything changes together */
.section--CTA .btn a:hover,
.section--CTA .btn .btn-sm:hover {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--bs-first-accent) !important;
    background-color: var(--bs-first-background) !important;
    color: var(--bs-first-accent) !important;
    /* Rounded corners - this fixes the sharp edges */
    border-radius: 0.375rem !important;     /* Standard Bootstrap medium radius */
}

/* email button */
.custom-card-btn {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--bs-third-accent) !important;
    background-color: none !important;
    border-width: var(--button-border-width)!important;
    border-radius: 0.375rem !important; 
}
.custom-card-btn:hover {
   border-width: 1px !important;
   border-style: solid !important;
   border-color: var(--bs-third-accent) !important;
   background-color: var(--bs-third-accent)  !important;
   color: var(--bs-first-accent) !important;
   /* Rounded corners - this fixes the sharp edges */
   border-radius: 0.375rem !important;     /* Standard Bootstrap medium radius */
}

/*grey bg section*/
.section--grey {
  background-color: var(--bs-primary-light)!important;
}

.section--grey h1 {
  color:var(--bs-first-accent)!important;
}

.section--grey h2,
p {
  color:var(--bs-first-text)!important;
}
.section--grey--nohover {
  background-color: var(--bs-primary-light)!important;
}

.section--grey--nohover h1 {
  color:var(--bs-first-accent)!important;
}

.section--grey--nohover h2,
p {
  color:var(--bs-first-text)!important;
}

.section--grey .btn .btn-lg{
  text-decoration: none !important;
}
/*white bg section*/
.section--white h1 {
  color:var(--bs-first-accent)!important;
}

.section--white h2,
p,
.section--white .card a  {
  color:var(--bs-first-text)!important;
}


.section--white--nohover h1 {
  color:var(--bs-first-accent)!important;
}

.section--white--nohover h2,
p,
.section--white--nohover .card a  {
  color:var(--bs-first-text)!important;
}

.navbar{
 border-bottom: 1px solid #1a3c8e;
}

/* Base link style inside central-menu */
.central-menu .nav-link,
.central-menu a,
.navbar .top-right-menu,
.navbar .top-right-menu a,
footer a {
  color: var(--bs-first-text) !important;
  text-decoration: none !important;                    /* no underline by default */
  transition: 
    color 0.25s ease,
    text-decoration-thickness 0.25s ease;
  position: relative;
}

#collapseMenu .nav-link a,
#collapseMenu a{
  color: var(--bs-primary-light) !important;
  text-decoration: none;                    /* no underline by default */
  transition: 
    color 0.25s ease,
    text-decoration-thickness 0.25s ease;
  position: relative;
}


.navbar .value-proposition{
  color: var(--bs-second-text) !important;
}
/*navbar button*/
.navbar .btn,
.card-body .btn-read:hover,
.card-body .btn-subscribe,
.btn.btn-subscribe {
  border-color:var(--bs-first-accent)!important;
  background-color: var(--bs-first-accent)!important;
  color: var(--bs-primary-light)!important;
}
  /* Hover state */
  .navbar .btn:hover,
  .card-body .btn-read,
  .card-body .btn-subscribe:hover {
    border-color: var(--bs-first-accent) !important;
    background-color: var(--bs-first-background) !important;
    color: var(--bs-first-accent) !important;
     text-decoration-color:non !important;
}

/* Underline – created with pseudo-element (more control than text-decoration) */
.central-menu .nav-link::after {
  content: "";
  position: absolute;
  bottom: -6px;                             /* distance from text */
  left: 0;
  width: 100%;
  height: 2.5px;                            /* base thickness */
  background-color: var(--bs-first-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

/* Hover / focus state */
#collapseMenu a:hover,
#collapseMenu a:focus,
#collapseMenu a:active{
  font-weight: var(--fw-light) !important;
}

.central-menu .nav-link:hover,
.central-menu .nav-link:focus,
.central-menu .nav-link:active,
.top-right-menu .nav-link:hover,
.top-right-menu .nav-link:focus,
.top-right-menu .nav-link:active,
.navbar .top-right-menu a:hover,
.navbar .top-right-menu a:active,
.navbar .top-right-menu a:focus,
footer a:hover,
footer a:focus,
footer a:active{
  color: var(--bs-first-accent) !important;
}

.central-menu .nav-link:hover::after,
.central-menu .nav-link:focus::after,
.central-menu .nav-link:active::after ,
.top-right-menu .nav-link:hover::after,
.top-right-menu .nav-link:focus::after,
.top-right-menu .nav-link:active::after{
  transform: scaleX(1);                     /* line grows from left to right */
  height: 3.5px;                            /* becomes bolder on hover */
}

#collapseMenu a:hover,
.top-right-menu .nav-link:hover,
.central-menu .nav-link:hover {
  text-decoration-thickness: 3.5px !important;
  text-decoration-color: var(--bs-first-accent) !important;  /* show on hover */
}

#collapseMenu {
  background-color: var(--bs-first-accent)!important;
}

#collapseMenu .bottom-side-menu .nav-link:hover,
#collapseMenu .bottom-side-menu .nav-link:focus,
#collapseMenu .bottom-side-menu .nav-link:active,
.card .card-body a:hover {
  font-weight: var(--fw-bold) !important;
}
/*======SPACE SYSTEM=========*/
:root {
  /* ===== 4px Base Grid ===== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

}
/*======VERTICAL RHYTMH=========*/

/* Reset browser margins */
* {
  box-sizing: border-box;
}

/* Reset default browser spacing */
body,
h1, h2, h2, h3, h4, h5,
p, ul, ol {
  margin: 0;
}

/* Typography rhythm */
body {
  line-height: 1.6 !important;
}

/* Paragraph spacing */
p + p {
  margin-top: var(--space-6)!important; /* 24px */
}

/* Heading spacing */
/*h1 {
  margin-bottom: var(--space-7);
}*/

h1 {
  padding-top: var(--space-9);
  margin-bottom: var(--space-6);
}

h2 {
  padding-top: var(--space-8);
  margin-bottom: var(--space-4);
}

/* Heading + paragraph spacing */
h1 + p,
h2 + p,
h2 + p {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.section--CTA p{
  margin-top: var(--space-5);
}

h1 ,
h2 {
  padding-bottom: var(--space-7);
}
.section--CTA h1 {
  padding-bottom: var(--space-4);
}

/* Lists */
ul, ol {
  margin-top: var(--space-6);
  padding-left: var(--space-6);
}
ul > li:last-child,
ol > li:last-child{
    margin-bottom: var(--space-6);
}

/*======SECTIONS, CARD & COMPONENT SPACING =========*/
.lead {
  padding-bottom: var(--space-2);
}



.lead p {
  padding-bottom: var(--space-6);
}

.card {
  padding-top: var(--space-6);
  margin-bottom: var(--space-8);
}

.card h2 {
  padding-top: var(--space-2);
  margin-top: var(--space-0);
}

.card img {
  margin-bottom: var(--space-0);
}
/*space between cards*/
.row + .row {
  margin-top: var(--space-6); /* 24px */
}

/*main part button spacing*/
main .btn,
.subscribe-form .btn-subscribe{
  margin-top: var(--space-6); /* 24px */
  margin-bottom: var(--space-6);
}


/*======LAYOUT SPACING =========*/
body {
  margin: var(--space-0);
}

main{
    margin-top:var(--space-0);
    
}
.navbar{
margin-top: var(--space-6);
padding: var(--space-6) 0; /* 24px top/bottom, 24px sides */
}

/* Inner content starts below navbar padding */
#collapseMenu > div {
  display: flex !important;
  flex-direction: column !important;
  padding: var(--space-6);                   /* breathing room at top */
  min-height: 100% !important;
}

.container-fluid {
  padding-left: var(--space-6);   /* 24px left/right – adjust to taste */
  padding-right: var(--space-6);
  padding-bottom:var(--space-6) ;
}

/* Bottom menu sticks to bottom */
#collapseMenu .bottom-side-menu {
  margin-top: auto !important;           /* ← this sticks it to bottom */
  padding-top: var(--space-4);           /* breathing room above */
}
#collapseMenu a,
#collapseMenu li {
  margin-bottom: var(--space-3);
  margin-top: var(--space-6);
  padding-left:var(--space-6);
  
}
/* No huge gaps between bottom links */
#collapseMenu .bottom-side-menu .nav-link,
#collapseMenu .bottom-side-menu li{
  margin-bottom: var(--space-3)!important;
  margin-top: var(--space-3)!important;
}

#collapseMenu .bottom-side-menu .nav-link+.nav-link{
  margin-top: var(--space-3)!important;
}

footer{
  margin-top:var(--space-6) ;
}

/*========GENERAL SETTINGS=============*/
/* Make collapse a full-page overlay BELOW the navbar */
#collapseMenu {
  position: fixed !important;
  top: 170px !important;               /* = your navbar height – adjust if different */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000 !important;            /* lower than navbar's 1050 */
  width: 100% !important;
  height: calc(100vh - 170px) !important;  /* full height minus navbar */
  margin: 0 !important;
  padding: 0 !important;
  background: white;                   /* or your menu background */
  overflow-y: auto;
  transform: translateY(100%);         /* slide from bottom – or use translateX for side slide */
  transition: transform 0.35s ease;
  list-style-type: none !important;
}

/* When open – slide into view */
#collapseMenu.show {
  transform: translateY(0);
}

/* Inner content – full height, scrollable */
#collapseMenu > div {
  min-height: 100%;
  padding: 2rem 1.5rem;
  
}

/* Optional: semi-transparent backdrop (only behind menu, not navbar) */
body:has(#collapseMenu.show)::before {
  content: "";
  position: fixed;
  inset: 110px 0 0 0;                  /* start below navbar */
  z-index: 1030;                       /* below menu, below navbar */
  pointer-events: none;
}

/* Make sure navbar stays on top and fixed */
.navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050 !important;            /* must be higher than menu */
  background: white;                   /* or your navbar bg */
}


.main-header-h2 {
    text-align: center;
}

.main-paragraph-h2 {
    text-align: center;
}

#image-left {
    float: left;
    margin-right: 0px;
}

/* Footer Container */
footer {
    background: var(--bs-primary-light);
    color: var(--bs-first-text);
    font-family: Arial, sans-serif;
    padding: 20px;
    border-top: 2px solid var(--bs-first-text);
    
}

/* Top section: left logo+links, right subscribe */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--bs-first-text);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/* Left block: logo + links */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style-type: none !important;
}

.footer-left img {
    width: 120px;
    height: auto;
}

.footer-left a {
    text-decoration: none;
    margin-right: 10px;
    font-size: 14px;
}


/* Right block: subscribe module */
.footer-right-top {
    display: flex;
    flex-direction: column;
    /* STACK elements vertically */
    align-items: flex-start;
    /* keep text left-aligned */
    gap: 5px;
}

.subscribe-form-portfolio{
    display: flex;
    /* input + button in one row */
    gap: 5px;
    flex-direction: column;
    align-items: flex-start;
}

.footer-right-top input[type="email"] {
    padding: 5px;
    border: 1px solid var(--bs-first-text);
    border-radius: 4px;
    background-color: var(--bs-primary-light) !important;
}

.footer-right-top button,
.footer-bottom .social-icons a {
    padding: 6px 12px;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    border-color: none !important;
    background-color: var(--bs-first-accent) !important;
    color: var(--bs-first-background) !important;
}
.footer-right-top button:hover,
.footer-bottom .social-icons a:hover{
    border-color: var(--bs-first-accent) !important;
    border: 1px solid var(--bs-first-accent)!important;
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-first-accent) !important;
}

/* Bottom section: left social, right copyright */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-icons img {
    width: 42px;
    height: 42px;
    margin-right: 10px;
}

/* VANTA.JS Clouds Background CSS */
.vanta-card {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: #1a3c8e !important;
}

.vanta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;

  opacity: 0;
    transition: opacity 1.6s ease-in-out;   /* Gentle fade */
}

.vanta-bg.visible {
    opacity: 1;
}

.content-inner {
  position: relative;
  z-index: 2;
}

.vanta-card h1 {
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
}

.vanta-card h1,
.vanta-card p {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/*Images Settings
/* Image container */
.image-box-value {
    width: 100%;
    max-width: 1200px;   /* prevents it from getting too big */
    aspect-ratio: 16 / 9; /* modern way instead of fixed height */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Image behaves like your original img-fluid */
.image-box-value img,
.ratio img {
    max-width: 100%;
    min-height: 100%;
    width: auto;
    display: block;
}

/*Gradient BUTTON FOR CMS*/
.text-decoration-none/*,
.text-decoration-none:hover*/ {
    text-decoration: none !important;
    color: var(--bs-first-background) !important;
}       
.footer ul > li {
    list-style-type: none !important;
}

/*Carousel Video Container Settings*/
.video-wrapper {
    max-width: 1000px;
    margin: 1.5rem auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--bs-first-text);
    background: var(--bs-first-text);
}

.video-wrapper iframe,
.video-wrapper video {
    width: 100% !important;
    height: 620px !important;
}