.profile-header-details {
  display: flex;
  align-items: flex-start;
    margin-right: auto;
    margin-left: auto;
    width:70%;
    margin-top: -96px;;
    margin-bottom: 84px;
}

.profile-image-container {
  flex-shrink: 0;
  margin-right: 24px;
}

.profile-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.profile-content-edit {
  display: flex;
  flex-direction: column;
  width: 100%;
}

 /* Default color for links */
  .profile-reward-points a {
    color: #848484; /* Change this to your desired default color */
  }

  /* Color for visited links */
  .profile-reward-points a:visited {
   
    color: #848484; /* Same color as default, change if needed */
  }
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* Adjust as needed */
        margin-top: 20px;
}

.col-sm-6 {
    width: 50%;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.giveaway-link {
    margin-left: 5px; /* Adjust as needed */
}

.profile-reward-points-cont:visited { color: #848484;}
.profile-reward-points:visited {
    color: #848484;
}

.progress {
  height: 10px; /* Adjust the height of the progress bar */
  background-color: #f0f0f0; /* Background color of the progress bar */
  border-radius: 5px; /* Rounded corners */
  margin-top: 10px;
margin-bottom: 12px;
}

.progress-bar {
  height: 100%; /* Set the height to fill the progress bar */
  background-color: #E63946; /* Color of the progress bar */
  border-radius: 5px; /* Rounded corners */
  transition: width 0.3s ease; /* Smooth transition effect */
}

.profile-reward-title {
    font-weight: 400;
    color: #000000;
    font-size: 16px;
}

.overlay-tips-name-tips {max-width: calc(100% - 140px);padding-left:34px;}

.airport-tips-img {
    position: relative;
    width: 130px;
    height: 130px;
    display: inline-block;
}
.airport-tips-img img {
    border-radius: 8%;
    border: 2px solid #ffffff;
}
.airport-tips-code-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Optional: Any additional styling you want for the text */
    font-size: 40px;
    font-weight: bolder;
    color: white; /* or any other color */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* To make text stand out against the image */
}
.airport-tips-img img {
    display: block;
    width: 100%;
    height: 100%;
}

  .radio-container {
        display: inline-block;
        position: relative;
        margin-right: 15px; /* Adjust the spacing between multiple radio buttons */
    }

    /* Style for the radio input */
    .radio-container input {
        position: absolute;
        opacity: 0;
    }

    /* Style for the radio checkmark */
    .radio-checkmark {
        position: relative;
        height: 20px; /* Adjust the height of the radio button */
        width: 20px; /* Adjust the width of the radio button */
        background-color: #eee; /* Adjust the color of the radio button */
        border-radius: 50%; /* Ensure the radio button appears as a circle */
        display: inline-block;
        vertical-align: middle; /* Align the radio button vertically */
        margin-right:4px;
    }


    /* Style for the dot inside the radio button */
    .radio-dot {
        position: absolute;
        display: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff; /* Adjust the color of the dot */
        height: 12px; /* Adjust the size of the dot */
        width: 12px; /* Adjust the size of the dot */
        border-radius: 50%; /* Ensure the dot appears as a circle */
    }

    /* Style for the dot when radio button is selected */
    .radio-container input:checked + .radio-checkmark .radio-dot {
        display: block;
    }
    .radio-container {padding-left:20px;padding-right:20px;}

    /* Style for the label text */
    .radio-label {
        display: inline-block;
        vertical-align: middle; /* Align the label text vertically */
            cursor: hand; /* Change cursor to pointer hand */
    }
    /* Style for the radio checkmark when selected */
    .radio-container input:checked + .radio-checkmark {
        background-color: #E63946; /* Adjust the color when radio button is selected */
    }
    /* Change cursor to pointer hand on hover over radio button */
    .radio-container:hover input[type="radio"] {
        cursor: pointer;
    }

#favourite-tab {padding-top: 40px;
    padding-bottom: 20px; background-color:#fcfafa;}
#tips-tab {background-color: #fcfafa;
    padding-top: 20px;
    padding-bottom: 20px;}
    
.profile-info {
     position: relative;
    z-index: 9999;
}
.profile-info p {text-align:left;margin:0px 0px 0px 2px;color: #ffffff; text-transform:uppercase;}
.profile-description p  {text-align:left;font-size: 17px;
    letter-spacing: 0.07px;font-weight:300;}

.profile-description {
  margin-top: 18px; /* Adjust the spacing between the divs as needed */
  align-self: flex-start;
}
.profile-image {     
    border-radius: 50%;
    width: 200px;
    padding: 2px;
    height: 200px;
    background: #ffffff;
    position: relative;
    z-index: 9999;
    border: solid 6px #ffffff;
}
.profile-h1 {color: #ffffff;
    position: relative;
    z-index: 99999; margin: 0px 0px 0px 0px; font-size:45px;padding: 0px; text-align:left;font-weight:600;}
.profile-header {min-height:200px;}
.profile-content-edit p {text-align:left; font-size:13px;}
.airport-card {
  position: relative;
  /* Other existing styles */
}
.profile-separater {
    border-top: 1px solid #f5f5f5;
    width: 100%;
       margin: 18px 0px 18px 0px;
}
.profile-reward-points {display:flex;margin-bottom:8px;}
.profile-reward-points-heading {display:flex;margin-bottom:8px;margin-top:14px;}
.profile-reward-points-monthly {text-align:right;margin-bottom:8px;}
.profile-reward-points-cont {margin-bottom: 15px; color: #848484;}
.profile-reward-points-coin {text-align: center;
    width: 24px;
    margin-right: 4px;}
.profile-reward-points-coin img {height:15px;}
.profile-button a {color: #595858;
text-decoration: underline;font-size:15px;text-align:left;}


.profile-button {
    margin-top: 24px;
    margin-bottom: 24px;
    color: #a8a5a5;
    display: flex;
    flex-wrap: wrap;
}

.profile-link {
    display: flex;
    align-items: center; /* Align items vertically */
    margin-right: 10px; /* Adjust spacing between link pairs */
}

.profile-link a {
    margin-left: 5px; /* Adjust spacing between icon and text */
}

@media screen and (max-width: 600px) {
    .profile-link {
        flex-basis: 100%; /* Each link occupies full width on smaller screens */
        margin-bottom: 10px; /* Adjust spacing between rows */
    }

    .profile-link i {
        margin-right: 5px; /* Adjust spacing between icon and text on mobile */
    }
}


.airport-card {
  position: relative;
  /* Other existing styles */
}

.airport-card {
  position: relative;
  /* Other existing styles */
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Set initial opacity to 0 for transparency */
  z-index: 1; /* Ensure the overlay is above the content */
  transition: background-color 0.3s ease; /* Add transition for smooth effect */
}

.airport-card:hover .card-overlay {
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the alpha value for the desired darkness on hover */
}

.overlay-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2; /* Place the link above the overlay */
}




/* For iPad */
@media only screen and (max-width: 1024px) {
  .profile-header-details {
    width: 100%;
    margin-top: -64px;
  }
  
  .profile-image-container {
    margin-right: 16px;
  }
  
  .profile-info {
    margin: 0px 0px 0px 4px;
  }
  
  .profile-description {
    margin-top: 12px;
  }
  
  .profile-image {
    width: 150px;
    height:150px;
  }
  .radio-container {padding-left:0px;padding-right:0px;}
  .profile-h1 {
    font-size: 28px;
  
  }
  .row, .progress, .profile-reward-points-monthly {margin-right:14px;}
}

/* For Mobile */
@media only screen and (max-width: 600px) {
  .profile-header-details {
    width: 100%;   
     margin-top: -54px;
  }
  
  .profile-image-container {
    margin-right: 8px;
    margin-left: 8px;
  }
  
  .profile-info {
    margin: 0px 0px 0px 2px;
  }
  
  .profile-description {
    margin-top: 6px;
    margin-right: 14px;
  }
  
  .profile-image {
    width: 100px;
    height:100px;
  }
  
  .profile-h1 {
    font-size: 24px;
  }
  .airport-tips-img {
    width: 100px;
    height: 100px;
}

.overlay-tips-name-tips
{
    padding-left: 18px;
    max-width: calc(100% - 100px);
}
.airport-tips-code-txt
{
    font-size:30px;
}
}

@media only screen and (min-width: 769px) {
    .profile-info h1, .profile-info p {
       color:#ffffff;
       text-align:left;
    }
    .profile-content-edit {
        text-align:left;
    }
}

@media only screen and (max-width: 769px) {
    .wp-block-table {margin:0px;padding:0px;}
        
    }


@media only screen and (max-width: 372px) {
   .profile-header-details {
     display: block;
     align-self: auto;
     padding-left: 14px;
     padding-right: 14px;
   }
   .profile-h1 {color:#000000;}
   .profile-info p {color:#000000;}
   .profile-header {min-height: 200px;}
    .profile-info h1,  .profile-info p  {text-align:center;color:#000000;}
}