/*********************************************************************************

        Custom CSS Changes made by eKamria
        
*********************************************************************************/  

  h1 {
    color: #DC193D;
    font-family: "Atkinson Hyperlegible", sans-serif !Important;
    Text-align: left;
    text-shadow: 1px 1px 1px #aaa;
    font-size: 3.1rem !important;
    line-height: 1.2;
    font-weight: 900;
    padding-bottom: 25px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}
    
 
 h2 {
   font-family: 'Atkinson Hyperlegible', sans-serif;
   font-weight: 900;
   margin-top: 10px !important;
   color: #DC193D; 
   font-size: 2.3rem;
   line-height: 1.2;
    padding-bottom: 20px;
   }  
   
 h3 {
  font-family: "Atkinson Hyperlegible", sans-serif;
   font-weight: 900;
   color: #252536;
   font-size: 1.8rem;
   line-height: 1.2;
   padding-bottom: 15px;
   text-shadow:0.5px 0.5px 1px rgba(0, 0, 0, 0.15); 
   } 

h4 {
   font-family: "Atkinson Hyperlegiblet", sans-serif;
   font-weight: 900;
   color: #252536;
   font-size: 1.5rem;
   text-shadow:0.5px 0.5px 1px rgba(0, 0, 0, 0.15); 
   } 


   
body {
     font-family: 'Segoe UI',  san-serif;
     text-align:left;
   line-height: 1.6em;
   padding-top: .5em;
   font-size:1.2rem;
   } 
   

 a {
  transition: color .4s;
  text-decoration: underline;
  text-underline-offset: 3px;
}

  a:link,
a:visited { color: #3B58A7; }
a:hover   { color: #912029; }
a:active  {
  transition: color .3s;
  color: #912029;
  text-underline-offset: 3px;
}  

.link { text-decoration: none; }
    
.logo-image {
    margin-top: 5.5rem;
}
img.responsive {
    max-width : 100%;
    height : auto;
}

/* Bullet list 
-----------------------------------------------------------------*/
/* Apply FontAwesome bullets only to lists inside article content */
/*.com-content-article ul,*/
.item-page ul,
.blog-item ul,
article ul,
.article-content ul,
.content ul {
  list-style: none;
  padding-left: 0;
}

.com-content-article ul li,
.item-page ul li,
.blog-item ul li,
article ul li,
.article-content ul li,
.content ul li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

.com-content-article ul li:before,
.item-page ul li:before,
.blog-item ul li:before,
article ul li:before,
.article-content ul li:before,
.content ul li:before {
  content: "\f138";
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  color: #912029;
  font-size: 18px;
  margin-right: 10px;
  margin-top: 0;
  flex-shrink: 0;
}

/*ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

ul li:before {
  content: "\f138";
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  color: #912029;
  font-size: 18px;
  margin-right: 10px;*/
 /* margin-top:0; /* Fine-tune vertical alignment */
  /*flex-shrink: 0; /* Prevents icon from shrinking */
/*}
*/

/* Breadcrumbs
-----------------------------------------------------------------*/
/*ol.mod-breadcrumbs {
    margin-left: -25px !important;
}*/
.breadcrumbs {
    margin-left: 25px !Important;
}

#donatesub {
   color: #912029;
   font-size: 125%;
   font-style: bold;
   font-weight: 600;
   text-shadow: 1px 1px 1px #aaa;
   }

/* Curved underline -red
-----------------------------------------------------------------*/
.curved-underline {
    position:relative;
}

.curved-underline:after {
    content: '';
    position:absolute;
    width: 100%;
    border-top: solid 3px #20466a;
    left: 0;
    bottom: -10px;
    border-radius: 50%;
    height: 9px;
}

/* Curved underline - white
-----------------------------------------------------------------*/
.curved-underline-2 {
    position:relative;
}

.curved-underline-2:after {
    content: '';
    position:absolute;
    width: 100%;
    border-top: solid 3px #ffffff;
    left: 0;
    bottom: -15px;
    border-radius: 50%;
    height: 9px;
}




    
/*Resources Push button to bottom of card
---------------------------------------------------------------*/
.card.h-100 {
    display: flex;
    flex-direction: column;
  }

  /* Make card body stretch and push button down */
  .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .card-body .btn {
    margin-top: auto;       /* pushes button to bottom */
    align-self: flex-start; /* keep button left-aligned */
  }
  
  /*Bloomerang - Registration Form - Stack labels & input fields
  ------------------------------------------------------------------*/
  
/* Stack labels above fields for text, email, tel, textarea, and select */
.registration-form .field input[type="text"],
.registration-form .field input[type="email"],
.registration-form .field input[type="tel"],
.registration-form .field input[type="number"],
.registration-form .field textarea,
.registration-form .field select {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

/* Keep radio buttons and checkboxes inline with their labels */
.registration-form .field.radio input,
.registration-form .field.checkbox input {
    display: inline-block; /* stays side by side with label */
    width: auto;           /* don’t stretch */
    margin-right: 0.5rem;  /* spacing between button and text */
}


/* Add space after the radio buttons and checkboxes in donation forms
-----------------------------------------------------------------------*/
/* Add space to the right of radio buttons */
.donation-form .field.radio input[type="radio"],
.registration-form .field.radio input[type="radio"],
.membership-form .field.radio input[type="radio"] {
    margin-right: 8px;
}

/* Add space to the right of checkboxes */
.donation-form .field.checkbox input[type="checkbox"],
.registration-form .field.checkbox input[type="checkbox"],
.membership-form .field.checkbox input[type="checkbox"] {
    margin-right: 8px;
}

/* Make form fields full-width
-----------------------------------------------------------------*/
/* Make all form inputs full-width EXCEPT radio and checkbox */
.donation-form .field input:not([type="radio"]):not([type="checkbox"]),
.donation-form .field select,
.donation-form .field textarea,
.donation-form #card-element,
.donation-form #paypal-button-container,
.registration-form .field input:not([type="radio"]):not([type="checkbox"]),
.registration-form .field select,
.registration-form .field textarea,
.membership-form .field input:not([type="radio"]):not([type="checkbox"]),
.membership-form .field select,
.membership-form .field textarea {
    max-width: 100% !important;
    width: 100% !important;
}

/* Make the card element full-width */
.donation-form .field .StripeElement,
.registration-form .field .StripeElement,
.membership-form .field .StripeElement {
    max-width: 100% !important;
    width: 100% !important;
}

/*****************************************************************
                       CALENDARS
*****************************************************************/

/* Shrink Sunday on Events Calendar
-----------------------------------------------------------------*/
/* More general approach for first column */
#eb-calendar-page table td:nth-child(1),
#eb-calendar-page table th:nth-child(1) {
    width: 5% !important;
}

/* Shrink time size
-----------------------------------------------------------------*/
.fc-daygrid-block-event .fc-event-time, .fc-daygrid-block-event .fc-event-title {
    font-size: 14px !important;
}

/* Start Daily view at 7 am
-----------------------------------------------------------------*/
/* Hide time slots before 7:00 AM - targeting the row structure */
.fc-timegrid-slot-lane[data-time="00:00:00"],
.fc-timegrid-slot-lane[data-time="00:30:00"],
.fc-timegrid-slot-lane[data-time="01:00:00"],
.fc-timegrid-slot-lane[data-time="01:30:00"],
.fc-timegrid-slot-lane[data-time="02:00:00"],
.fc-timegrid-slot-lane[data-time="02:30:00"],
.fc-timegrid-slot-lane[data-time="03:00:00"],
.fc-timegrid-slot-lane[data-time="03:30:00"],
.fc-timegrid-slot-lane[data-time="04:00:00"],
.fc-timegrid-slot-lane[data-time="04:30:00"],
.fc-timegrid-slot-lane[data-time="05:00:00"],
.fc-timegrid-slot-lane[data-time="05:30:00"],
.fc-timegrid-slot-lane[data-time="06:00:00"],
.fc-timegrid-slot-lane[data-time="06:30:00"],
.fc-timegrid-slot-lane[data-time="07:00:00"]{
    display: none !important;
}

/* Also hide the labels */
.fc-timegrid-slot-label[data-time="00:00:00"],
.fc-timegrid-slot-label[data-time="00:30:00"],
.fc-timegrid-slot-label[data-time="01:00:00"],
.fc-timegrid-slot-label[data-time="01:30:00"],
.fc-timegrid-slot-label[data-time="02:00:00"],
.fc-timegrid-slot-label[data-time="02:30:00"],
.fc-timegrid-slot-label[data-time="03:00:00"],
.fc-timegrid-slot-label[data-time="03:30:00"],
.fc-timegrid-slot-label[data-time="04:00:00"],
.fc-timegrid-slot-label[data-time="04:30:00"],
.fc-timegrid-slot-label[data-time="05:00:00"],
.fc-timegrid-slot-label[data-time="05:30:00"],
.fc-timegrid-slot-label[data-time="06:00:00"],
.fc-timegrid-slot-label[data-time="06:30:00"] {
    display: none !important;
}

/* Style Upcoming Events - Events Booking extension custom css
------------------------------------------------------------------*/


/* Home cards - light on dark
-----------------------------------------------------------------*/
     .home-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .home-card {
            background: #FBFAF8;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: all 0.3s;
        }
        
        .home-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 12px rgba(0,0,0,0.15);
        }
        
        .home-card h3 {
            color: #1e40af;
            font-size: 24px;
            margin-bottom: 5px;
        }
        
        .home-card p {
            color: #6b7280;
            margin-bottom: 20px;
        }
        
        .home-card a {
            color: #1e40af;
            text-decoration: none;
            font-weight: 600;
        }
/* Home cards - dark on light
-----------------------------------------------------------------*/        
       .home-cards-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .home-card-2 {
            background: #F2EEE4;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: all 0.3s;
        }
        
        .home-card-2:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 12px rgba(0,0,0,0.15);
        }
        
        .home-card-2 h3 {
            color: #1e40af;
            font-size: 24px;
            margin-bottom: 5px;
        }
        
        .home-card-2 p {
            color: #6b7280;
            margin-bottom: 20px;
        }
        
        .home-card-2 a {
            color: #1e40af;
            text-decoration: none;
            font-weight: 600;
        }
 
/* Full width container for content area
---------------------------------------------------------------------------*/
    .full-width-container {
    /* Push the container to the left edge of the viewport */
    margin-left: calc(-50vw + 50%); 
    /* Push the container to the right edge of the viewport */
    margin-right: calc(-50vw + 50%);
    /* Set the maximum width to the full viewport width */
    max-width: 100vw;
  
    /* Ensure the content within the container is centered if desired */
    /*box-sizing: border-box; *//* Include padding in the element's total width */
}

/* Mission Icon (blue gradient) */
-----------------------------------------------------------------*/
.icon-mission {
  background: linear-gradient(135deg, #4A7FAE, #5A8CBF);
  color: #fff;
}

/* Vision Icon (red gradient) */
.icon-vision {
  background: linear-gradient(135deg, #C04B54, #D6616A);
  color: #fff;
}

/* Values Icon (orange-ish gradient for variety) */
.icon-values {
  background: linear-gradient(135deg, #F4A261, #F7B77F);
  color: #fff;
}

/* General styles for all icons */
.icon-wrapper {
  width: 70px;
  height: 70px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-card:hover .icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/*.icon-wrapper {
  width: 70px;
  height: 70px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: #00539B; /* VA blue example */
 /* display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.75rem;
  
}*/

.home-card h3 {
  margin: 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
}



/* home card end-----------------------------------------------*/
/*  twoColumns
---------------------------------------------------------------*/
/*.twoColumns{
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
}*/
.twoColumns {
  column-gap: 20px; /* Consistent gap for all screen sizes */
}

/* Large screens (two columns) */
@media (min-width: 768px) {
  .twoColumns {
    column-count: 2;
  }
}

/* Small screens (single column) */
@media (max-width: 768px) {
  .twoColumns {
    column-count: 1;
  }
}
 /*===========================================================================
 
   Shaded background area for pages
   ==========================================================================
*/
  .bottomshade {
  background-color: rgba(32, 48, 91, 0.1);
  border-radius: 5px;
  padding: 70px 50px 50px 50px;
    margin: 50px 0px;
 }

/* space under captions
------------------------------------------------------------------------*/
.figure {
    margin:0px !important;
}
/*===========================================================================
 
   Donation page
   ===========================================================================
*/

.page-title {
    display: none;
}
.jd-container .jd-row {
    margin: 30px;
    border: 1px #cfd0d3 solid;
    /* box-sizing: border-box; */
    -moz-box-sizing: border-box;
    /* -webkit-box-sizing: border-box; */
    width: 100%;
    max-width: 90%;
    border-radius: 5px;
}


.caret1::before {
   font-family: 'FontAwesome';

    content: '\f0da';
    color: #20466a;
 /*   margin: 0px 7px 0px -11px;*/
    padding-right: 7px;
}

/*  Memorial & Honor sidebar
-------------------------------------------------------------------------*/
.campaign-details {
    background-color: transparent !important;
    border-top: 0px !Important;
}

.mod-jd-campaign-donate-now {
    background-color: transparent !Important;
}

.campains-list .campain-list {
    border: 0px;
}

.campain-list .campaign-details .campaign-donate-info {
    border: 0px;
}

/*********************************************************************************

        JCE Mediabox closing link "x"
        
*********************************************************************************/ 

.wf-icon-close-squeeze:before {
    content: "\f05c";
    background-color: none;
    color: #912029;
}



/*===========================================================================
 
   Add separator line (old board)
  ===========================================================================
*/
/* Gradient transparent - color - transparent */

hr.separate {

    border: 0;
    height: 3px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0));
        width: 80%;
    margin:40px auto 40px auto;
}

.entry-header {
  margin-bottom: 0px;
  }
  
address {
    margin-bottom: 0px;
    font-style: normal;
    line-height: 1.42857143;
}

/*===========================================================================
 
   icon-colors
  ===========================================================================
*/

.icon-color-1 {
    color:  #DB193A;
}

.icon-color-2 {
    color: #912029;
}

 /*===========================================================================
 
   Add a right border (page separator line)
  ===========================================================================
*/
 .lborder {
  
  border-left: solid; 
  border-width: 1px; 
  border-color: #eeeeee;
  }
 


 
/*Centering of Donate Area
-----------------------------------------------------------------------------
*/  
 #donate {
 text-align: right;
 float: right;
 margin-right: 5px !important;
 } 
 
 
/* Page Title
-----------------------------------------------------------------------------
*/

div.article-details {
   /* border-bottom: 1px solid #eee !Important;*/
    margin-bottom: 50px !Important;
    padding: 0px 50px !Important;
}


 
  /*===========================================================================
 
   Donate Amount Module
   ===========================================================================
   General Donation
   ---------------------------------------------------------------------------
*/


.module-title donate {
  color: #912029;
}
.donate-details .jd-taskbar .btn, .donate-details-mod .jd-taskbar .btn {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 5px 0 0;
    color: #e8e0cb !important;
    min-height: 10px;
    background-color: #57A73A;
    background-image: none;
    border: 1px  solid;
    padding: 5px 10px;
    text-align:center;
}
  .donatetitle {
   background-color:#57A73A; 
   color: white;
   padding:20px;
   width: 116%;
   }
   
  .btn-primary {
  background-color:#3b58a7 !important;
  border-color:#2E6DA4;
  color:#FFFFFF !important;
}

  .btn-primary a:visited {
  background-color:#3b58a7 !important;
  border-color:#2E6DA4;
  color:#FFFFFF;
}

  .btn-primary a:hover {
  background-color:#912029 !important;
  border-color:#2E6DA4;
  color:#FFFFFF;
}

 .btn-primary a:active {
  background-color:#912029 !important;
  border-color:#2E6DA4;
  color:#FFFFFF;
}

.btn.btn-orange {
     background: #FF815B !important;
  background-color: #FF815B !important;
  border-color: #FF815B !important;
  color: #FFFFFF !important;
}
.btn.btn-orange:hover,
.btn.btn-orange:active,
.btn.btn-orange:focus {
     background: #FF9977 !important;
  background-color: #FF9977 !important; /* Lighter orange for hover */
  border-color: #FF9977 !important;
  color: #FFFFFF !important;
}

   .input-append .add-on, .input-prepend .add-on {
     min-height: 34px;
   }

  .button {
  background-color:#3b58a7 !important;
  border-color:#2E6DA4;
  color:#FFFFFF !important;
  text-decoration: none;
}

.donate-btn {
  background-color: #3B58A7;
  color: #ffffff !Important;
  padding: 10px 0px;
  }
  
.donate-btn:hover {
  background-color:#912029 !important;
  border-color:#2E6DA4;
  color:#e8e0cb;
}

/* Add caret on dropdown menu and adjust spacing for desktop
-----------------------------------------------------------------*/
@media (min-width: 768px) {
  span.mod-menu__heading.nav-header {
    position: relative;
    display: block;
    color: #e8e0cb;
    margin: 2px 10px 2px 20px;
    padding: 7px 20px;
    text-align: center;
    font-weight: normal;
  }

  span.mod-menu__heading.nav-header::after {
    content: "▼";
    font-size: 12px;
    color: #e8e0cb;
    margin-top: 4px;
    margin-left: 5px;
  }
}

/* Hero text - old
------------------------------------------------------------------*/
/* Mobile: full width */
/*@media (max-width: 767px) {
  .hero-box {
    width: 90%;
    margin: 10px auto;
    padding: 1rem;
  }
}

/* Tablet: medium width */
/*@media (min-width: 768px) and (max-width: 1199px) {
  .hero-box {
    width: 70%;
    margin: 40px auto;
    padding: 1.5rem;
  }
}*/

/* Desktop: smaller width, aligned left */
/*@media (min-width: 1200px) {
  .hero-box {
    width: 33%;
    margin: -100px 200px 0px;
    padding: 2rem;
  }
}*/



/* New Hero Section
----------------------------------------------------------------*/
/* Main hero section - background image, full width, wave */
.hero {
    color: white;
    padding: 5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 500px;
    
    /* Force full width - override any container */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    left: 0;
    right: 0;
}

/* Dark overlay for readability */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 58, 95, 0.3);
    z-index: 0;
}

/* White wave at bottom - guaranteed full width */
.hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background: url('data:image/svg+xml,<svg viewBox="0 0 1200 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,40 C300,80 600,0 900,40 C1050,60 1150,80 1200,60 L1200,120 L0,120 Z" fill="%23fdfdfd"/></svg>') no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}

/* Content container - centers the text */
.hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Heading styles */
.hero h1 {
    color: #FDFDFD;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

/* Paragraph styles */
.hero p {
    color: #FDFDFD;
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
}


/* Two Columns
----------------------------------------------------------------*/
/*.twoColumns{
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
}*/
.twoColumns {
  column-gap: 20px; /* Consistent gap for all screen sizes */
}

/* Large screens (two columns) */
@media (min-width: 768px) {
  .twoColumns {
    column-count: 2;
  }
}

/* Small screens (single column) */
@media (max-width: 768px) {
  .twoColumns {
    column-count: 1;
  }
}

/* Board Individual Page
-----------------------------------------------------------------*/

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem 2rem;
        }


        .board-member {
         /*   background: #fdfdfd; */
            margin-bottom: 3rem;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            overflow: hidden;
            transition: all 0.3s ease;
            border-left: 5px solid #3498db;
        }

        .board-member:hover {
            box-shadow: 0 15px 40px rgba(0,0,0,0.12);
            transform: translateY(-2px);
        }

        .member-header {
            display: flex;
            align-items: flex-start;
            padding: 2.5rem;
            gap: 2rem;
        }

        .member-photo-wrapper {
             
              width: 100%;
        }

        .member-photo {
             max-width: 254px;
             height: auto;
             display: block;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
             border-radius: 4px;
             margin: 0 auto 10px auto;
}


        .member-title {
            font-size: 1.3rem;
            color: #3498db;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .member-card .row {
             display: flex;
             flex-direction: column; /* default stack */
        }

       .member-position {
            font-style: italic;
        }
        
        .member-institution {
            font-weight: 600;
        }

        .member-tenure {
            background: #ecf0f1;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            color: #555;
            display: inline-block;
            margin-bottom: 1rem;
        }

        

        
        @media(min-width: 992px) {
            .member-card .row {
             flex-direction: row; /* side by side on desktop */
  }
}

@media (min-width: 768px) {
  .member-photo-wrapper {
    max-width: 254px;
  }
  
}

        @media (max-width: 768px) {
            .container {
                padding: 2rem 1rem;
            }
            
            .header h1 {
                font-size: 1.5rem;
            }
            
            .member-header {
                flex-direction: column;
                text-align: center;
                gap: 1.5rem;
            }
            

            .member-photo {
                width: 254px !important;
                height: auto;
                display:block;
                margin: 0 auto 10px auto;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Subtle soft shadow */
                 border-radius: 4px; 
            }
            
           
        }

        .loading-animation {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease forwards;
        }

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