/*
*
* ==========================================
* Buttons with hover effect
* ==========================================
*
*/


 .custom-btn {
    background: #F5F5F5; /* Light grey background */
    border: 2px solid #232F87; /* Border color */
    border-radius: 10px; /* Rounded corners */
    height: 80px; /* Height of button */
    margin: 5px; /* Space around button */
    text-align: center; /* Center text */
    align-content: center; /* Positions objects centrally */
    transition: background 0.3s; /* Smooth transition for hover */
}

.custom-btn:hover {
    background: #c7c7c7; /* Darker grey on hover */
}

.custom-btn a {
    display: block; /* Make link behave like a block */
    padding: 25px 0; /* Padding for text inside button */
    text-decoration: none; /* Remove underline from link */
    color: #000000; /* Text color */
}

 .custom-btn1 {
    background: #2F73E2; /* Dark blue background */
    border: 2px solid #000000; /* Border color */
    border-radius: 10px; /* Rounded corners */
    height: 80px; /* Height of button */
    margin: 5px; /* Space around button */
    text-align: center; /* Center text */
    align-content: center; /* Positions objects centrally */
    transition: background 0.3s; /* Smooth transition for hover */
}

.custom-btn1:hover {
    background: #4D4D4D; /* Darker grey on hover */
}

.custom-btn1 a {
    display: block; /* Make link behave like a block */
    padding: 25px 0; /* Padding for text inside button */
    text-decoration: none; /* Remove underline from link */
    color: #ffffff; /* Text color */
}

 .custom-btn2 {
    background: #ed2035; /* Red background */
    border: 2px solid #000000; /* Border color */
    border-radius: 10px; /* Rounded corners */
    height: 80px; /* Height of button */
    margin: 5px; /* Space around button */
    text-align: center; /* Center text */
    align-content: center; /* Positions objects centrally */
    transition: background 0.3s; /* Smooth transition for hover */
}

.custom-btn2:hover {
    background: #4D4D4D; /* Darker grey on hover */
}

.custom-btn2 a {
    display: block; /* Make link behave like a block */
    padding: 25px 0; /* Padding for text inside button */
    text-decoration: none; /* Remove underline from link */
    color: #ffffff; /* Text color */
}

/*
*
* ==========================================
* Cards
* ==========================================
*
*/

.card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 20px; 
    padding: 20px; 
}

.card {
    background-color: #f5f5f5; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    padding: 20px; 
    text-align: center; 
    transition: transform 0.2s; 
}

.card:hover {
    background-color: #e2e0e0; 
}

.card h3 {
    margin: 0 0 10px; 
}

.card p {
    color: #666; 
    font-size: 14px; 
}

/*
*
* ==========================================
* Columns
* ==========================================
*
*/


.col2-dashed {
  padding: 15px;
  columns: 300px 2;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #e1e1e2;
}

.col3-dashed {
  padding: 15px;
  columns: 200px 3;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #e1e1e2;
}


.col2-solid {
  padding: 15px;
  columns: 300px 2;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 2px solid #e1e1e2;
}

.col3-solid {
  padding: 15px;
  columns: 200px 3;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 2px solid #e1e1e2;
}



/*
*
* ==========================================
* FLIP CARD WITH TEXT
* ==========================================
*
*/

/* This is a 300px x 300px flip card with the front image defined on the page HTML */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Do a horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #000000;
  color: white;
  transform: rotateY(180deg);
}

/*
*
* ==========================================
* Image hover zoom
* ==========================================
*
*/


/*
*
* ==========================================
* Lists
* ==========================================
*
*/

.custom-list {
  list-style-type: none;
  padding: 0;
}
.custom-list li {
  background: #f5f5f5;
  padding: 10px;
  margin: 5px 0;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/*
*
* ==========================================
* Parallax
* ==========================================
*
*/

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
  }

/*
*
* ==========================================
* Tooltips
* ==========================================
*
*/

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 130px;
  bottom: 100%;
  left: 65%;
  margin-left: -65px; /* Use half of the width (130/2 = 65), to center the tooltip */
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}