@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&display=swap');

body{
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6{
    font-weight: 900;
}

header{
    background: url('img/header.jpg') no-repeat center;
    min-height: 100vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    position: relative;
    color:#ffffff;
    z-index: 1;
}

header::before{
    content:'';    
    position: absolute;
    top:0px;
    left:0px;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.header-content{
    width: 100%;
    position: absolute;
    top: 50%;
    left:0px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0px 15px;
}



header a{
    font-size: 36px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    text-decoration: none;
    color:#ffffff;
    font-weight: 700;
    margin-bottom: 25px;
    display: block;
}

header h1{
    font-size: 80px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

header p{
    font-size: 30px;
    margin-top: 20px;
    font-weight: 700;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

header .btn{
    margin-top:60px;
    font-size: 24px;
}

.btn-primary{
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
    font-weight: 700;
    padding: 11px 50px;
    font-size: 20px;
    
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

.step{
    padding: 100px 0px;
}

.step .card{
    padding: 35px;
    position: relative;
}

.number{
    background: #0d6efd;
    font-size: 36px;
    font-weight: 700;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    text-align: center;
    color:#ffffff;
    margin-bottom: 25px;
}

.step .card:after, .step .card:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.step .card:after {
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #0d6efd;
	border-width: 25px;
	margin-top: -30px;
    z-index: 1;
}

.step .col-lg-4:last-child .card:after {
    display: none;
}

.step .card p{
    font-size: 22px;
    font-weight: 500;
}

.step .btn{
    margin-top: 65px;
}

/* Large devices (desktops, 992px and Down) */
@media (max-width: 991.98px) {
    .step .card{
        margin-bottom: 25px;
    }
    .step .card:after, .step .card:before{
        display: none;
    }
    .step .btn{
        margin-top: 30px;
    }
    header p{
        font-size: 24px;
    }
}

/* Medium devices (tablets, 768px and Down) */
@media (max-width: 767.98px) {
    
}

/* Small devices (landscape phones, 576px and Down) */
@media (max-width: 575.98px) {
    .number{
        margin: 0 auto 22px;
    }
    .step{
        padding: 50px 0px 80px;
    }
    .step .card p{
        text-align: center;
    }
    header h1{
        font-size: 36px;
    }
    header p{
        font-size: 21px;
        margin-bottom: 40px;
    }
    .step .card p{
        font-size: 20px;
    }
    header .btn{
    width: 100%;
    box-sizing: border-box;   /* include the 50px padding in the width */
    font-size: 20px;
    margin-top: 0;
    }
    
    
}

/* Orientation Portrait */
@media only screen and (max-width: 800px) and (orientation: landscape) {
    header{
        padding: 80px 0px;
        min-height: auto;
        height: 100vh;
    }
    header h1{
        font-size: 36px;
        padding-top: 100px;
    }
    header p{
        font-size: 21px;
        margin-bottom: 40px;
    }
    header::before{
        height: 100vh;
    }
    .header-content{
        padding-top: 50px;
        position: static;
    }
    header .btn{
        margin-top: 0;
    }
}        

  .container2 {
    width: 90%;
    margin: 0 auto; /* Centers the container */
    display: flex; /* Uses Flexbox for layout */
    justify-content: space-between; /* Distributes space between images */
  }

  .container2 img {
    width: calc(33.333% - 10px); /* Adjusts image width, accounting for margin */
    margin: 5px; /* Adds some space between the images */
  }
  









/* --- HERO: desktop centering + above-the-fold fit (iOS/desktop) --- */

/* 1) Neutralize the rogue grid block if it's present anywhere above */
header {
  display: block;                 /* undo accidental grid */
  text-align: inherit;
  background-attachment: scroll;  /* avoid iOS fixed bugs */
  /* Real, stable viewport height across Safari/Chrome/Firefox */
  min-height: 100vh;              /* fallback for old browsers */
  min-height: 100svh;             /* stable on iOS + modern browsers */
}
header::before { height: 100%; }  /* was 100vh somewhere */

/* 2) Keep your absolute vertical-centering working and above overlay */
.header-content {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  z-index: 1;
  text-align: center;
  padding: 0 16px;
}

/* 3) Clamp typography so the H1 + subhead + button fit on 768px-tall screens */
header h1 {
  margin: 0;
  /* scales from small desktops to 4K TVs */
  font-size: clamp(40px, 6vw, 80px);
}
header p {
  margin: 16px auto 24px;
  max-width: 900px;
  line-height: 1.2;
  font-size: clamp(18px, 2vw, 28px);
}
header a {
  display: inline-block;
  font-weight: 700;
  margin-bottom: 0;               /* avoid pushing below fold */
  padding: 14px 28px;
  font-size: clamp(18px, 2vw, 32px);
}

/* 4) Landscape phones/small viewports: never force 100vh */
@media only screen and (max-width: 800px) and (orientation: landscape){
  header { height: auto; min-height: 100svh; }
  header::before { height: 100%; }
  .header-content { position: static; transform: none; padding-top: 50px; }
}

/* 5) If legal text sits under the button and causes overflow on short screens,
   give it a smaller size. */
.header-content small,
.header-content .legal, 
.header-content p:last-child {
  font-size: clamp(12px, 1.3vw, 14px);
  opacity: .9;
  margin-top: 12px;
}

/* Prevent other one-off overflows */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }