@charset "UTF-8";
/* CSS Document */


:root {
  --mr-color-bg: #0f0f0f;
  --mr-color-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.65));
  --mr-color-accent: #ef3d26;
  --mr-glow: 0 0 10px var(--mr-color-accent);
  --mr-delay-step: 0.5s;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #ecf0f2;
font-family: "barlow", sans-serif;
font-weight: 400;
font-style: normal;
	font-size: 0.9rem;


}
@keyframes gradientAnimation {
  0% {
    background: linear-gradient(to right, rgba(15, 30, 65, 1), rgba(18, 47, 116, 1));
  }
  25% {
    background: linear-gradient(to right, rgba(14, 35, 84, 1), rgba(18, 47, 116, 1));
  }
  50% {
    background: linear-gradient(to left, rgba(14, 35, 84, 1), rgba(18, 47, 116, 1));
  }
  75% {
    background: linear-gradient(to left, rgba(15, 30, 65, 1), rgba(18, 47, 116, 1));
  }
  100% {
    background: linear-gradient(to right, rgba(15, 30, 65, 1), rgba(18, 47, 116, 1));
  }
}

	 
h3,h2,h1, button {
	font-family: "agency-fb", sans-serif;
}

form
{
	font-family: "agency-fb", sans-serif;
}

input{
	border: 1px solid #2423423;
}

.pu1-button {
  display: block;
  margin: auto;
  padding: 15px;
  font-weight: 300;
  font-size: 1rem;
  text-transform: uppercase;
  color: #fff;
  background: #ef3d26;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pu4-button {
  display: block;
  margin: auto;
  padding: 15px;
  font-weight: 300;
  font-size: 1rem;
  text-transform: uppercase;
  color: #fff;
  background: #ef3d26;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Trigger */
.pu2-button {
  display: block;
  margin: auto;
  padding: 15px;
  font-weight: 300;
  font-size: 1rem;
  text-transform: uppercase;
  color: #fff;
  background: #ef3d26;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pu2-button:active { transform: translateY(1px); }

.pu1-button:active { transform: translateY(1px); }	


/* Trigger */
.pu3-button {
  display: block;
  margin: auto;
  padding: 15px;
  font-weight: 300;
  font-size: 1rem;
  text-transform: uppercase;
  color: #fff;
  background: #ef3d26;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pu3-button:active { transform: translateY(1px); }


.page-local
{
	color: #ffffff; 
	text-indent: 10px;
	font-size: 0.4em;
	margin-top: -5px;
}

/* Custom Scrollbar */
.pu1-modal__content-wrapper::-webkit-scrollbar {
  width: 4px;
}

.pu1-modal__content-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 192, 0, 1.00); /* Gold scrollbar thumb */
}

.pu1-modal__content-wrapper::-webkit-scrollbar-track {
  background-color: rgba(70, 70, 70, 1.00); /* Dark gray scrollbar track */
}

/* Custom Scrollbar */
.pu2-modal__content-wrapper::-webkit-scrollbar {
  width: 4px;
}

.pu2-modal__content-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 192, 0, 1.00); /* Gold scrollbar thumb */
}

.pu2-modal__content-wrapper::-webkit-scrollbar-track {
  background-color: rgba(70, 70, 70, 1.00); /* Dark gray scrollbar track */
}

/* Custom Scrollbar */
.pu3-modal__content-wrapper::-webkit-scrollbar {
  width: 4px;
}

.pu3-modal__content-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 192, 0, 1.00); /* Gold scrollbar thumb */
}

.pu3-modal__content-wrapper::-webkit-scrollbar-track {
  background-color: rgba(70, 70, 70, 1.00); /* Dark gray scrollbar track */
}

/* CSS rules specific to this page */
body::-webkit-scrollbar {
	width: 4px;
}
body::-webkit-scrollbar-thumb {
	background-color:rgba(255,192,0,1.00); /* Red scrollbar thumb */
}
body::-webkit-scrollbar-track {
	background-color:rgba(70,70,70,1.00); /* Light gray scrollbar track */
}


.titler_head
	{
		font-size: 0.5rem;
		text-indent: 0.5rem;
		font-weight: 400;
		text-transform: uppercase;
		color: #c92b17;
	}

.cardb p
{
	color: #ffffff;
	font-size: 1.3rem;
	margin-bottom: 30px;
	font-weight: 300;
}

span {

	color: #0f1f44;
}

p{
	font-size: 1.3em;
	font-weight: 300;
	text-rendering: geometricPrecision;
}

.container 
{
	margin-top: 20px;
}



.content-area {
  width: 90%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  text-align: center;
  position: relative;
	padding-bottom: 10px;
}

.header-space
{
	width: 100%;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
	background: rgba(239, 61, 38, 1); /* Light transparent background */
	backdrop-filter: blur(2px); /* Strong blur for a glassy effect */
	-webkit-backdrop-filter: blur(2px); /* For Safari */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
	transition: background 0.3s ease-in-out;
	z-index: 22;
	background-position: bottom;
	
}

h1 {
	text-align: center;
	font-size: 3rem;
	color: #ef3d26; 
	font-weight: 300;
	font-style: normal;
}

h2 {
	font-size: 1.7rem;
	color: #ef3d26; 
	font-weight: 400;
	font-style: normal;
}

.page-title span {
	color: #000000; 
}

.page-image {
  width: 100%;
  margin-left: auto;
  margin-right: auto;

}

/* Slider Styles */
.slider-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: 1;
  transition: transform 1s, opacity 1s;
}

.slide.active {
  opacity: 1;
  z-index: 10;
}

.slide img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.layer1 { transition: transform 1s, opacity 1s; z-index: 4; }
.layer2 { transition: transform 0.25s, opacity 1s; z-index: 3; }
.layer3 { transition: transform 0.5s, opacity 1s; z-index: 2; }
.layer4 { transition: transform 1s, opacity 1s; z-index: 1; }

.controls {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 -10px;
  box-sizing: border-box;
}

.controls button {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
  color: white;
  border: 0.5px solid #b4b4b4;
  padding: 20px;
  font-size: 24px;
  border-radius: 20%;
  margin: -10px;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.controls button:hover {
  background: linear-gradient(45deg, rgba(204, 204, 204, 0.5), rgba(80, 80, 80, 0.2));
  transform: scale(1.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.controls button:focus {
  outline: none;
}

#progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #f0f0f0;
  z-index: 999;
}

#progress-bar {
  height: 100%;
  width: 0;
  background-color: #ff5722;
  transition: width 3s;
}



/* Media Queries for responsiveness */



@media (min-width: 1025px) {
  .page-image {
    width: 50%;
	   margin-top: 55px;
  }
  .content-area {
    width: 50%;

  }
	  .modal-content {
		background: white;
		border-radius: 12px;
		width: 50%;
		height: 70%;
		text-align: center;
		position: relative;
		z-index: 33;
		overflow-y: auto;
		color: #000000;
  }

  .mr2-overlay a {
    font-size: 1.5rem;
  }
	.content-sub-area
	{
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 1024px) {
  .page-image {
    width: 100%;
	  margin-top: 70px;
  }
  .content-area {
    width: 80%;

  }
	  .modal-content {
		background: white;
		border-radius: 12px;
		width: 75%;
		height: 70%;
		text-align: center;
		position: relative;
		z-index: 33;
		overflow-y: auto;
		color: #000000;
  }

}

@media (max-width: 460px) {
  .page-image {
    width: 100%;
	   margin-top: 70px;
  }
  .content-area {
    width: 85%;

  }
  .mr2-overlay a {
    font-size: 1.2rem;
  }
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

 	  /* Container styling */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between; /* Ensures they are spaced apart */
  align-items: center;
	place-content:center;
  padding: 5px;
}
 
/* Box styling */
.box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Box 1 - 40% width */
.box-1 {
  width: 40%; /* First box has 40% width */
  animation: fadeInUp 1s ease forwards 0.3s; /* Delay for first box */
	vertical-align: middle;
}

/* Box 2 - 60% width */
.box-2 {
  width: 58%; /* Adjusted width for balance */
  animation: fadeInUp 1s ease forwards 0.4s; /* Delay for second box */
	vertical-align: middle;
}

/* Box 1 - 40% width */
.box-3 {
  width: 25%; /* First box has 40% width */
  animation: fadeInUp 1s ease forwards 0.5s; /* Delay for first box */
	vertical-align: middle;
}

/* Box 2 - 60% width */
.box-6 {
  width: 69%; /* Adjusted width for balance */
  animation: fadeInUp 1s ease forwards 0.7s; /* Delay for second box */
	text-align: left;
	vertical-align: middle;
	padding-left: 20px
}

/* Box 1 - 40% width */ 
.box-5 {
  width: 25%; /* First box has 40% width */
  animation: fadeInUp 1s ease forwards 0.6s; /* Delay for first box */
	vertical-align: middle;
}

/* Box 2 - 60% width */
.box-4 {
  width: 69%; /* Adjusted width for balance */
  animation: fadeInUp 1s ease forwards 0.6s; /* Delay for second box */
	text-align: left;
	vertical-align: middle;
	padding-left: 20px
}

/* Responsive Styling */
@media (max-width: 768px) {
  .box {
    width: 75%; /* Stack vertically on mobile */
  }
	  .modal-content {
		background: white;
		border-radius: 12px;
		width: 50%;
		height: 70%;
		text-align: center;
		position: relative;
		z-index: 33;
		overflow-y: auto;
		color: #000000;
  }

}

/* Animation Keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



	.card-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
  }



.card {
 --grad: red, blue;
	padding: 1.5rem;
	background-image: linear-gradient(to bottom left, #e0e4e5, #f2f6f9);
	border-radius: 0.8rem;
	box-shadow: 
	inset -2px 2px hsl(0 0 100% / 1),
	-20px 20px 40px hsl(0 0 0 / .25) ;
	text-align: center;
	width: 250px;
	opacity: 0;
	transform: translateY(30px); 
	animation: fadeInUp 0.8s ease forwards;
}
	  
.cardb {
	background: #0f1e41; /* Subtle white gradient */
	text-align: center;
	width: 100%;
	opacity: 0;
	min-height: 200px;
	transform: translateY(30px); 
	animation: fadeInUp 0.8s ease forwards;
}

  .cardb h3
  {
	  font-size: 2.5em !important;
	  font-weight: 400;
	  color: #ef3d26 !important;
  }


  .content-area-pp h3{
	margin:0px 0px 20px 0px;
	font-size: 2rem;
	color: #2f60b1;
  }

.card:nth-child(2) {
  animation-delay: 0.2s;
}
.card:nth-child(3) {
  animation-delay: 0.4s;
}
.card:nth-child(4) {
  animation-delay: 0.6s;
}
.card:nth-child(5) {
  animation-delay: 0.8s;
}
.card:nth-child(6) {
  animation-delay: 1s;
}

  .card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  h3{
    margin: 0.5rem 0;
	color: #ef3d26;
	  font-weight: 400;
  }

.card h3{
    margin: 0.5rem 0;
    font-size: 1.5rem;
	color: #ef3d26;
  }

  .card p, .cardb p {

	  
  }

.content-area h3
{
	font-size:1.8rem;
}

  .card a, .cardb a {
    display: inline-block;
    background: #4075ca;
    color: white;
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-size: 1rem;
    transition: background 0.3s;
	  text-transform: uppercase;
  }

  .card a:hover {
    background: #11bfff;
	   transition: background 0.1s;
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Mobile Layout */
  @media (max-width: 768px) {
    .card-section {
      flex-direction: column;
      align-items: center;
    }
	    .modal-content {
		background: white;
		border-radius: 12px;
		width: 70%;
		height: 70%;
		text-align: center;
		position: relative;
		z-index: 33;
		overflow-y: auto; 
		color: #000000;
  }
  }



.content-area-pp
{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
}


 

    /* canvas background */
    .particles-bg {
      background: #dc3f26;
      transform-origin: 0 0;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      pointer-events: none;
      width: 100%;
      height: 100%;
      display: block;
    }