@charset "utf-8";
.rt {
  position: relative;
  padding-bottom: 56.25%;
}
.rt iframe {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  border-radius: 4px;
}
.v80 {
  width: 80%;
  margin-left: 10%;
}
.profilevids {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 15px;
}
.forms p, .forms a, .forms ul {
  font-size: 23px;
  line-height: 1.9;
}
.longtext p {
  margin-bottom: 15px;
}
.longtext ol > li, .longtext ul > li {
  list-style: square;
}
.longtext ul {
  padding-left: 2rem;
  margin-bottom: 15px;
}
.pstorypics {
  padding-left: 20px;
  padding-right: 20px;

}

/* 1. Base style for the images */
.about__img img {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
  will-change: transform;
  cursor: pointer;
  border-radius: 5px; /* Optional: matches most modern UI */
}

/* 2. The Hover/Mouseover Effect */
.about__img img:hover {
  /* Moves the image 15px up */
  transform: translateY(-15px);
  
  /* Adds a soft shadow to emphasize the elevation */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* 3. Ensuring the container allows for movement */
.about-area__wrapper {
  padding-top: 20px; /* Gives space so the image doesn't hit the element above it */
  display: flex;
  align-items: flex-start;
}


/*Tox */

.fs24 {
	font-size: 24px;
}
.fs25 {
	font-size: 25px;
}
.fs26{
	font-size: 26px;
}
.fs27 {
	font-size: 27px;
}

.lgth {
  font-size: 50px;
  font-weight: 300;
}
.lgt1 {
  font-size: 40px;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  line-height: 1.2;
  margin-top: 30px;
}
.lgt2 {
  font-size: 34px;
  font-weight: bold;
  text-align: left;
  line-height: 1.3;
}
.fc-blue {
  color: #435874;
}

.fc-blue a {
  color: #435874;
	text-decoration: underline;
}
.fc-blue a:hover {
	text-decoration: none;
}

.bg-blue {
  background-color: #435874;
}
.bg-blue a, .bg-blue2 a {
	color: #fff;
	text-decoration: underline;
}
.bg-blue a:hover, .bg-blue2 a:hover {
	text-decoration: none;
}
.bg-blue i {color: #5784aa;
}
.video__thumb-link:hover i {color: #fff;
}
.bg-blue2 {
	 background-color:#5784aa;
}



.bg-grn {
  background-color: #d6df99;
}
.bg-bluecad {
  background-color: #435874;
	
	/* Your background image settings */
    background-image: url("../images/profile-hp.png");
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Using your specific positioning */
    background-position: 50% 30%; 
    
    /* Ensures the div expands to the full width of the viewport */
    width: 100%;
    overflow: hidden;
}


.glass-list {
    background: rgba(255, 255, 255, 0.1); /* Very light white tint */
    backdrop-filter: blur(10px);          /* This creates the "frosted glass" look */
    -webkit-backdrop-filter: blur(10px);   /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle edge highlight */
    border-radius: 15px;                  /* Soft corners */
    padding: 20px;
    list-style-position: inside;          /* Keeps bullets aligned inside the box */
    color: white;
}
.learnmore {
	 list-style-type: none; 
	text-align: center;
	display: block;                 /* Ensures it takes up the full width to allow centering */
}

.learnmore a {
color: #fff;
    text-decoration: underline;
    font-weight: bold;
    transition: opacity 0.3s ease;
	font-size: 20px;
}

.learnmore a:hover {
    opacity: 0.8;
    color: #00d4ff; /* Or any highlight color you like */
}


.btn-custom-blue {
  background-color: white;
  color: #235173; /* Standard Bootstrap Blue */
  border: 2px solid #235173;
  padding: 10px 25px; /* Extra padding looks better on rounded buttons */
  transition: all 0.3s ease; /* Makes the color flip smooth */
  /* --- The "Bigger" settings --- */
  padding: 15px 40px; /* Increases height (15px) and width (40px) */
  font-size: 1.25rem; /* Makes the text larger */
  font-weight: 600; /* Makes the text slightly bolder so it stands out */
  /* ----------------------------- */
}
.btn-custom-blue:hover {
  background-color: #235173; /* Blue background on hover */
  color: white; /* Text turns white so it's readable */
  border-color: #235173;
}
.toxpoints {
  list-style: none;
}
.toxpoints li::before {
  content: '✓';
  padding-right: 15px;
  font-weight: bold;
}
.rnd {
  border-radius: 4px;
}




.equal-height-img {
    height: 185px; /* Set your desired height */
    width: 100%;
    object-fit: contain; /* Use 'cover' to fill the box, or 'contain' to see the whole logo */

  }





@media only screen and (max-width: 899px) {
  .v80 {
    width: 100%;
    margin-left: 0%;
  }
}