/* Inline SVG sprite icons — replace Font Awesome. Sized via font-size,
   colored via currentColor, so callers can style them like text glyphs. */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

/* Styling for the top navigation menu */
.top-nav {
/*  height: auto; */ /* Auto-adjusts to the content */
/*  padding: 10px 20px; /* Vertical padding added */
  background-color: #f1f9ff;
  /*box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-nav li{
    font-family: 'Poppins', sans-serif;
}

.modal{
    font-size: 16px;
}

.top-menu{
    margin-bottom: 0;
    margin-block-end: 0;
}

/* Style for the top menu items */
.top-menu {
  list-style: none;
  display: flex;
  gap: 0px;
}

.top-menu li {
  font-size: 16px;
  font-family: Poppins, sans-serif;
}

/* Add a vertical divider between menu items */
.top-menu li {
  border-right: 1px solid #ccc;
  padding-left: 15px;
  padding-right: 15px;
}

/* Style the links */
.top-menu li a {
  padding-left: 15px;
  padding-right: 15px;
  color: #333;
  text-decoration: none;
}

.top-menu li a:hover {
  color: #0055da; /* Change the color on hover if desired */
}

#language-switcher img {
  margin-top: -10px;
  height: 35px;  
  width: auto; 
}


.sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}


/* modal dialogue */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
			background-color: rgba(52, 152, 219, 0.2); /* Adjust the background color and opacity as needed */
			backdrop-filter: blur(3px); 
            display: flex;
            justify-content: center;
            align-items: center;
		z-index: 9999; /* Add this line */
        }

        .popup {
            background: rgb(241,249,255);
            box-shadow: 0 0 20px 5px rgba(34,81,140, 0.5);
            width: auto;
            padding:  40px 30px 20px 30px;
            position: relative;
			border-radius:5px;
        }

        .popup h2 {
            margin-top: 0;
        }

        .popup .close {
            position: absolute;
            right: 30px;
            top: 15px;
			font-size: 14px;
            cursor: pointer;
        }

        .popup input {
            width: 100%;
            margin: 10px 0;
            padding: 10px;
            box-sizing: border-box;
        }

        .popup button {
            width: 100%;
            padding: 10px;
            background: #3498db;
            color: white;
            border: none;
            margin-top: 10px;
        }

        .popup a {
            display: block;
            text-align: center;
            margin-top: 10px;
            color: #3498db;
            text-decoration: none;
        }
    .feature {
        font-family: Roboto, Arial, sans-serif;
        font-size: 18px;
        color: #3773b5;
        font-weight: 500;
        text-align: left;
        padding-top: 10px;
    }

    .feature i {
        font-size: 22px;
        margin-right: 5px;
    }

/* CSS for the modal container */
#contactPopup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-radius: 5px;
    justify-content: center;
    align-items: center;
}

#verifyPopup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
/*    transition: backdrop-filter 0.2s ease-in-out; /* Transition effect */
}

#previewPopup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-radius: 5px;
    justify-content: center;
    align-items: center;
}

.large-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
}

.customer-logos { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This centers the child divs horizontally */
    align-items: center; /* This centers the child divs vertically */
    position: relative; /* Added this to allow absolute positioning inside */
    overflow: hidden; /* This will clip any child elements (or pseudo-elements) that extend outside the bounds */
/*    width: 950px; /* The element will take up 90% of the width of its parent */
    margin: 0 auto; /* Top and bottom margins are set to 0, left and right margins are automatically calculated */
}

.customer-logos::before,
.customer-logos::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px; /* Adjust the width as needed */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
    z-index: 1; /* Add a z-index value to increase stacking context */
}

.customer-logos::after {
    right: 0;
    transform: scaleX(-1); /* Flip the gradient for the right side */
}


.customer-logosShort {
    display: flex;
    justify-content: center; /* This centers the child divs horizontally */
    align-items: center; /* This centers the child divs vertically */
    position: relative; /* Required for pseudo-elements to be positioned absolutely */
    overflow: hidden; /* Ensures content doesn't overflow the edges */
/*    width: 75%; /* Adjust width as needed */
    margin: auto; /* Center the container */
}

.customer-logosShort div {
    height: auto; /* Adjust height as needed */
    width: 100%; /* Adjust width as needed */
/*    margin: 0 150px -50px 150px; /* This also helps center the divs horizontally */
    position: relative; /* Create a stacking context */
}

.customer-logosShort::before, .customer-logosShort::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15%; /* Adjust the width as needed */
    pointer-events: none; /* Allows interactions with elements behind the overlay */
    z-index: 1; /* Ensure overlays appear on top of content */
}
/*
.customer-logosShort::before {
    left: 150px;
    background: linear-gradient(to right, #fbfdff, rgba(250, 250, 250, 0));
}

.customer-logosShort::after {
    right: 150px;
    background: linear-gradient(to left, #fbfdff, rgba(250, 250, 250, 0));
}
*/
.customer-logosShort img {
	height: 100%;
    width: auto; /* Maintain aspect ratio */
    border: 0px solid black;
	background: transparent;
/*    object-fit: contain; /* Ensure the entire logo is visible */
/*    filter: grayscale(100%); /* Convert image to black and white */
/*    opacity: 0.75 !important; /* Adjust the opacity to make the images lighter */
    margin: 0;
	padding: 0;
    z-index: 1; /* Ensure images appear below the overlays */
}

/*.customer-logosShort img:hover {
/*    filter: none; /* Remove the grayscale filter on hover */
/*    opacity: 1 !important; /* Restore the opacity on hover */
/*    transition: opacity 0.3s ease, filter 0.1s ease; /* Smooth transition */
/*}
*/



.gradient-button {
  background: linear-gradient(to bottom, #ffffff, #c2e4fd);
  border: 1px solid #3773b5;
  color: #666;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  position: relative;
  width: 300px; /* Set the width to 100 pixels */
  height: auto; /* Set the height to 100 pixels */
}

.gradient-button::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%);
  background: #c2e4fd;
  color: #333;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  font-weight:500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  width: 350px; /* Set the width to 100 pixels */
  height: auto; /* Set the height to 100 pixels */

}

.gradient-button:hover::after {
  opacity: 1;
  visibility: visible;
}



/* Sublinks */
#Nav {
  top: 60px;
  margin: 0;
  position: absolute;
  width: 957px;
  height: 50px;
  white-space: nowrap;
}
/*	background:url(../images/subNavBlue.gif) repeat-x;padding:0 10px 0 0;overflow:hidden;} */

#NavCl {
  text-align: right;
  margin-top: 0;
}

.submenu {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding-left:0 ;
  list-style: none;
  gap: 0px;
}

.submenu-link {
  display: block;
  padding: 5px 15px 5px 15px;
  margin: 0px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  border-bottom: 0px solid #ccc;
  transition: background-color 0.3s, color 0.3s;
}

.submenu-link:last-child {
  border-bottom: none;
}

.submenu-link:hover {
  background-color: #ccc;
  color: #fff;
}

  .container-banner {
    flex-wrap: wrap;
    margin-bottom: 0px;
    line-height: 28px;
    color: #5f6368;
	font-family: "OpenSans", Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
  }

  .container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
    line-height: 28px;
    color: #5f6368;
	font-family: "OpenSans", Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
  }

  .headline {
    font-family:Poppins, Arial, sans-serif;
    font-weight: 600;
    font-size: 34px;
/*	letter-spacing: 0.02em;*/
    line-height: 54px;
    text-decoration: none;
	color: #333;
/*    color: #007bff; /* light blue */
/*    margin-top: 30px;*/
    margin-bottom: 25px;
  }

  .subheadline {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    font-weight: 600;
	letter-spacing:1.15px;
    font-size: 28px;
    line-height: 42px;
    text-decoration: none;
    color: #333;
    padding-top: 0;
    padding-bottom: 50px;
 /*   margin-bottom: 0px;*/
	text-align:center;
/*	background-color: #fafafa;*/
  }




.IE7 .clear{clear:none;width:100%;height:0}

.clearRight{clear:right;height:0;overflow:hidden}
.clearLeft{clear:left;height:0;overflow:hidden}


body {
  font-family: Poppins, "Google Sans Text", sans-serif;
  margin: 0;
/*  color: #333;*/
    overflow-y: scroll;
}


/*outside edge*/
/*.outerBodyWrap{background:#363f47 url(../images/body.gif) center 321px repeat-y;}*/
/*.outerBodyWrap{background:#3a3f43 url(../images/bg.gif) center 321px repeat-y;}*/

.outerBodyWrap{background-image: url(/public/images/body2.webp)}    /*  <<<<<<<<<<<<<<<<<<<-------------- THIS ONE IS GOOD */
/*.outerBodyWrap{background-image: url(../images/body_holidays_bottom.jpg)} */ /* <<<<<<-------------- THIS ONE IS GOOD FOR XMAS */
/*.outerBodyWrap{background-image: url(../images/body_mothers_day_bottom.jpg)}*/

/*.bodyWrap{background:url(/public/images/bodyWrap.webp) left top repeat-x;margin-bottom:-17px;}*/
.bodyWrap{background:url(/public/images/bodyWrap.webp) left top repeat-x;} 
/*.bodyWrap{background:url(../images/bg.gif) left top repeat-x;margin-bottom:-17px;}*/
/*.bodyWrap{height:0}*/
/*#outerWrap{background:url(../images/outerWrap.jpg) center top no-repeat}*/

#outerWrap{background:url(/public/images/bodyWrap.webp) center top no-repeat}                /*<<<<<<<<<<<<<<<<<<<-------------- THIS ONE IS GOOD */
/*#outerWrap{background:url(../images/body_holidays.jpg) center top no-repeat;margin-top:-10px;} */ /*<<<<<<<<<<<<<<<<<<<---------- WHEN USING THIS ONE MAKE SURE TO INCLUDE APPROPRIATE _bottom.jpg ABOVE */
/*#outerWrap{background:url(../images/body_mothers_day.jpg) center top no-repeat;margin-top:-10px;}*/
.Opera #outerWrap{overflow:hidden}


/*PAGE HEADER*/
#pageHeader{position:relative;margin-bottom:0}

#hdrPgHrLo A{width:269px;height:57px;text-indent:-9999px;display:block;position:absolute;top:25px;left:24px;cursor:pointer;overflow:hidden}
#hdrPgHrLo {margin:0}


#hdrPgHrWizard A{width:98px;height:97px;text-indent:-9999px;display:block;position:absolute;top:25px;left:24px;cursor:pointer;overflow:hidden}
#hdrPgHrWizard {margin:0}
#hdrPgHrWizard A{margin-top:-4px;margin-left:800px;background:url(../images/wizard_orange.jpg) left top no-repeat;text-decoration:none}

#hdrPgHrNew A{z-index:20; width:50px;height:40px;text-indent:-9999px;display:block;position:absolute;top:25px;left:24px;cursor:pointer;overflow:hidden}
#hdrPgHrNew {z-index:20; margin:0}
#hdrPgHrNew A{z-index:20; margin-top:45px;margin-left:910px;background:url(../images/new.png) left top no-repeat;text-decoration:none}

#PgHrL{position:static;float:right;clear:both}
#PgHrL UL{margin:15px 21px 0 0}
#PgHrL LI{padding:0 0 0 15px;background:url(../images/tinyBulletYellow.gif) 12px 1px no-repeat;display:block;float:right;font-size:1px;line-height:1px;height:5px}
#PgHrL LI A{display:block;margin:0;padding:0;height:5px}
#PgHrL LI .t2i{display:block;margin:0;padding:0;font-size:1px;height:5px}



#hdrLiveChat{position:absolute;right:0px;top:0px}

#hdrAddThis{z-index:200;position:absolute;right:20px;bottom:5px}
#hdrAddThis, #hdrAddThis A {font-family:verdana, arial, helvetica, sans-serif;color:#fff;font-size:12px}

#hdrName{position:absolute;right:25px;bottom:90px}
#hdrName, #hdrName A {font-family:verdana, arial, helvetica, sans-serif;color:#fff;font-size:12px}

#hdrTwitter{position:absolute;right:25px;top:100px}
#hdrTwitter, #hdrTwitter A {font-family:verdana, arial, helvetica, sans-serif;color:#fff;font-size:12px}


/*Body Tab*/
div.bodyMain {
  float: left;
  display:block;
  background-color:#fafafa;
 }
  
div.bodyMain p {
   text-align: center;
   }
div.spacer {
  clear: both;
  }
.d .pBody { text-align:justify; clear:both; margin-bottom:15px; padding-right:20px;}
.parTitle {font-size:1.0em; font-weight:bold; margin-bottom:10px;}


/* added by max */

#cap {
	font-family:"Google Sans Text", Roboto, Arial, sans-serif;
	color: #e60;
	font-size:52px; 
	font-weight:bold; 
	float:left; 
/*	height:37px; */
	line-height:60px; 
	margin-bottom:-10px; 
	margin-right:1px;}

/* end */

.float {float: left;}
.floatRight {float: right; margin-left:15px}

.cntr{ text-align:center; padding:0 0 0 0}
#pageFooter{clear:both;height:26px;padding:17px 15px 0 15px}
#pageFooter{background:url(../images/footer_back.jpg) 0 5px repeat-x}
#FooterL{float:right}
#FooterL LI{font-size:9px;display:block;float:left;background-image:none;list-style-type:none;color:#ccc;margin-top:-3px;padding:0}
#FooterL LI A{position:relative;top:1px;padding:0 5px 0 5px;text-decoration:none;color:#888;font-size:11px}
#FooterL LI.lastInList A{padding-right:0}
#FooterL LI A:hover{width:auto;margin-top:0;color:#405060}
#Cpy{color:#f5a24b;font-weight:bold;letter-spacing:-.03em;background:url(../images/copyright.gif) no-repeat;text-indent:-9999px;overflow:hidden}
.footerActive{float:left; display:block;color:#000; background-color:white; width:150px; text-align:center;font-size:9px;font-weight:bold;}
.footerActiveSpace{margin-left:25px;}
.footerSeal{float:left; display:block; margin-left:75px;}
#firstSeal{margin-left:40px}

.bCopy {font-size:14px; background:#FFFFFF; line-height: 150%;}
.bc .bCopy{height: 440px; margin-left:0;width:100%;background:#FFFFFF url(../images/br2.gif) top right repeat-y}
.smallBreak {margin:10px 0 0 0;}

.list A:visited {color:black;}

/*#btnSignUpNow:hover {cursor:pointer}*/

.signupButton {       /* to use single image css rollover, un-comment bg-position below and comment out bg-image and create single img in photoshop with both buttons...*/
	width: 145px;
	height: 70px;
	display: block;
	font-size: 10px;
	text-decoration: none;
	background-repeat:no-repeat;
	background-image:url(../images/signupButton-trans.png);
}

.signupButton:hover {
	/*background-position: bottom right;*/
	cursor:pointer;
	background-image:url(../images/signupButtonO-trans.png);
}


li.RedBullet { list-style-image:url(/graphics/bullet_red.webp); padding-left:10px; padding-bottom:8px;}
.today {color:#ff0000;}

/* ----------------------------------------       ADDED BY MAX     -----------------------------------------------*/

.quote A {text-align:justify;text-decoration:none}

/* hide or display elements in rightbar */
.hidden {display:none}

/*h1 {
	color: #96BF55;
	font-size: 20px;
	font-weight: normal;
	margin-left: 25px;
	text-align: left;
 	cursor: pointer; 
	cursor: hand;
}

/* ------------------------------------------------------------

	Vertical Accordions
*/




/*.accordion_contentTitle { */
/*   padding-left:25px; */
/*   padding-bottom:25px;
   font-family:Montserrat, arial, sans-serif;
   color: #4971aa;
   font-size:18px;
}*/

/*.accordion_content h2 {
	margin: 15px 0 5px 10px;
	color: #0099FF;
}*/

/*.accordion_content p {
	border: 1px solid black;
	line-height: 150%;
	padding: 15px 10px 15px 10px;
}*/

 #vertical_nested_container {
   margin: 20px auto 20px auto;
   width: 620px;
}

/* -----------------------------------   ROUNDED CORNERS - Grey border  -----------------------*/

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}

#xsnazzy h1 {font-size:2.5em; color:#fff;}

#xsnazzy h2 {font-size:2em;color:#06a; border:0;}

#xsnazzy p {padding-bottom:0.5em;}

#xsnazzy h2 {padding-top:0.5em;}

#xsnazzy {
  background: transparent;
    margin: 1em 0px;
    width: 100%;
}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}

.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}

.xb1, .xb2, .xb3 {height:1px;}

.xb2, .xb3, .xb4 {border-left:1px solid #97a5b0; border-right:1px solid #97a5b0;}

.xb1 {margin:0 5px; background:#97a5b0;}

.xb2 {margin:0 3px; border-width:0 1px;}

.xb3 {margin:0 2px;}

.xb4 {height:2px; margin:0 1px;}

.course-title {
  display: block;
  border: 0px solid #97a5b0;
/*  border-width: 1px;*/
  width: 100%;
    text-align: center;
}

.course-title h3 {
	font-family: Poppins, arial, sans-serif; 
	font-weight: 600; 
	font-size: 24px;
    text-align: center;
	position: relative;
/*	line-height: 1.25;*/
}


.price-wrapper {
    position: relative;
    color: #ff0000;
}

.line-through {
    position: absolute;
    top: 72.5%;
    left: -5px;
    right: 0;
    height: 2px;
    background-color: #ff0000;
    transform: rotate(-12.5deg);
    transform-origin: 0 0;
}

.price {
    color: black;
	font-weight: 500;
    font-size: 24px;
    margin-left: 0px;
}

.offer {
    color: #ff0000;
    font-size: 22px;
}

.offer-price {
    font-size: 24px;
    color: #ff0000;
	font-weight: 500;
}

.offer-details {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 22px;
/*    text-decoration: underline;*/
    text-align: center;
}

.asterisk {
/*    color: red; */
    font-size: 22px;
}

.pay-pass {
    font-weight: 400;
	color: #ff0000;
    text-decoration: underline;
}

.promo-code {
    font-weight: 500;
}


/* ---------------------- GRADIENT FILL ----------------------- 

<style type="text/css">

.grad img {
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}
.box {
  border: solid orange 2px;
  float: left;
  margin: 1px;
  position: relative;
  width: 165px;
  padding: 5px;
}
.box * {
  margin: 0px;
  position: relative;
  z-index: 1;
}
* html .grad {
  filter: progid:DXImageTransform.Microsoft.AlphaImage Loader (src='../images/grad_white.png', sizingMethod='scale');
}
* html .grad img {
  display: none;
}
* html .box {
    position:static;
}
.blue { 
  background-color: #2382a1; 
}
.green { 
  background-color: #4be22d; 
}
.pink { 
  background-color: #ff009d;
}
</style>

<!--[if IE 7]>
<style type="text/css">
.box {
  border: solid red 2px;
  height:2.5em;
}
</style>
<![endif]-->

/* ---------------------- GRADIENT FILL END ----------------------- */

/* ---------------------- TEXT WRAP AROUND IMAGE http://www.theboxoffice.be/index.php?op=theboxoffice ----------------- */

#BoxOfficeOutput {
    background: #FFFFFF url('../images/time_is_money.jpg') no-repeat top left ;
    color: #000000;
    line-height: 20px;
    color: #000000;
    width: 630px; /* fixed width */
}

 #BoxOfficeOutput2 {
	background: #FFFFFF url('../images/accepted_worldwide.png') no-repeat top right ;
    color: #000000;
    line-height: 20px;
    color: #000000;
    width: 580px; /* fixed width, just an example */
}
/*---------------------------------------------------------

/* --------------- ICON IN TITLE BAR -------------------------*/

img.icon
{
position:absolute;
left:130px;
top:-23px;
}

/* --------------- EXAM RESULTS -------------------------*/
.chosen
{
background:red;
}

.right
{background:lime;}

.wrong
{background:red;}

/*---------------------------------------------------------------------------------------------------------------*/

.jsclass body .randomcontent{ /*Do NOT remove! CSS to hide random contents in JS enabled browsers*/
    display: none;
}
.tabs-nav li{
    margin: 0 0 0 5px;
}
a {text-decoration: none; }
.cpr-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-family: Arial, sans-serif; /* Change the font of the tooltip */
    color: #333; /* Change the color of the tooltip text */
}

/* Style the tooltip text - it's initially hidden */
.cpr-tooltip .cpr-tooltiptext {
    visibility: hidden;
    background-color: #7cacf8;
    color: #fff; /* Change the color of the tooltip */
    text-align: center;
    padding: 10px; /* Add more padding to the tooltip */
    border-radius: 5px;
    font-size: 14px; /* Change the font size of the tooltip text */
    width: 200px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the tooltip text when you hover over the tooltip container */
.cpr-tooltip:hover .cpr-tooltiptext {
    visibility: visible;
    opacity: 1;
}




.cta-button {
    background-color: #1170D4; /* A shade of blue */
    color: white; /* White text on the button */
    padding: 10px 20px; /* Vertical and horizontal padding */
    border: none; /* Remove any border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Hand cursor on hover */
    font-size: 16px; /* Font size consistent with other text */
    font-family: 'Poppins', arial, sans-serif; /* Same font as other text */
    font-weight: 500; /* Slightly bold */
    transition: background-color 0.3s ease; /* Smooth background color transition */
    margin: -10px 0 10px 0; /* Space from the top */
	width:275px;
}

.cta-button:hover {
    background-color: #095AA0; /* A darker shade of blue on hover */
}

/* .step-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.5;
  z-index: 1;
}  */
.gradient-button2 {
    background: linear-gradient(to bottom, #ffffff, #c2e4fd);
    border: 1px solid #3773b5;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: relative;
    width: 200px; /* Set the width to 100 pixels */
    height: auto; /* Set the height to 100 pixels */
    line-height:1.3;
}

.gradient-button2::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background: #c2e4fd;
    color: #333;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight:500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    width: 350px; /* Set the width to 100 pixels */
    height: auto; /* Set the height to 100 pixels */

}

/* Duplicate of `.gradient-button:hover::after` (already defined near the top of this file) removed. */

/* INDEX PAGE STEPS */




/*.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/

.quote-section {
    margin-top: 20px;
    padding: 15px;
    border-left: 4px solid #ccc;
    background-color: #f9f9f9;
}

blockquote {
    margin: 0;
}

blockquote p {
    font-size: 1.2em;
}

blockquote footer {
    font-size: 1em;
    text-align: right;
    color: #666;
}



#parentDiv::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    border-top: 0px solid #dce2e7;
    top: 50%;
}