/*
Theme Name: BRB UDesign Child
Theme URI: https://d-themes.com/wordpress/udesign/envato-market/
Author: Andon
Author URI: https://1.envato.market/OdObz
Description: A slick, powerful and clean theme UDesign provides an intuitive set of options to help you setup your WordPress site quickly and effectively. Flexibility is key and it has been optimized for SEO and speed. It is also responsive & mobile ready should you choose that option. The UDesign theme features include: unlimited colors, widgetized home page, over 600 fonts to choose from, WooCommerce Integration, it is also translation and multilingual ready, step by step documentation, exclusive UDesign support forum and a helpful community. Always up-to-date security and many new features are constantly added as the theme evolves.
Version: 1.0
Template: u-design
License: GNU General Public License v2 and ThemeForest license
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, responsive, one-column, two-columns, three-columns, four-columns, full-width-template, left-sidebar, right-sidebar, custom-menu, custom-background, custom-colors, custom-header, custom-logo, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready

*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/
.event-row {
  border-bottom: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.event-row > [class*="col-"] {
  flex: 0 0 auto;           /* keep natural width */
  padding: 0 10px;
}

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



.event-row .date .num {
  font-size: 3.5rem;
  line-height: 1;
  color: #e7e7ef;
  font: 600 40px "itc-avant-garde-gothic-pro", sans-serif;
}
.event-row .date .mon-year {
  color: #e7e7ef;
  margin-top: 5px;
  font: 600 1.8rem "itc-avant-garde-gothic-pro", sans-serif;
 }
 

.event-row .pic img {
  border-radius: 6px;
  object-fit: cover;
}

/* 🎨 Style for the Event Title (H2) */
.container .event-row .col-md-7 h2 {
  margin-bottom: 12px;
  text-transform: uppercase !important; /* optional */
  color: #e7e7ef;
  font: 400 25px "itc-avant-garde-gothic-pro", sans-serif;
}

/* 📝 Style for the Event Excerpt (Paragraph) */
.container .event-row .col-md-7 p {
  line-height: 1.6;
  margin-bottom: 20px;
  color: #e7e7ef;
  font: 300 15px "itc-avant-garde-gothic-pro", sans-serif;
}

.event-row .event-title {
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
}
.event-row .cta {
  background-color: #2cbcc5;
  color: #000;
  font-weight: 400;
  border-radius: 0;
  transition: all 0.3s ease;
}
.event-row .cta:hover {
  background-color: #1b9ca4;
  color: #fff;
}

* --- MOBILE FIX --- */
@media (max-width: 768px) {
  .event-row {
    display: flex;
    flex-direction: column; /* text will come below */
  }

  /* Wrap date + image in a horizontal mini-row */
  .event-row .col-md-1,
  .event-row .col-md-4 {
    display: inline-block;
    vertical-align: middle;
  }

  .event-row .col-md-1 {
    width: 25%;
    text-align: center;
  }

  .event-row .col-md-4 {
    width: 75%;
  }

  /* Keep them side by side */
  .event-row .col-md-1,
  .event-row .col-md-4 {
    float: left;
  }

  /* Push excerpt below */
  .event-row .col-md-7 {
    clear: both;
    width: 100%;
    margin-top: 15px;
  }

  /* Optional: make image responsive */
  .event-row img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}


/*************** ADD YOUR CUSTOM CSS HERE  ***************/
/* Remove default white wrapper background */
/* --- Clean teal double-triangle pagination --- */
/* --- Neon Pagination with Single + Double Arrows --- */


.custom-pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination-inner a,
.pagination-inner span {
  color: #00ffff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  line-height: 1.6;
}

.pagination-inner a:hover {
  color: #fff;
}

.pagination-inner .page-num.current {
  background: none !important;
  color: #00ffff;
  font-weight: 700;
  font-size: 20px;
  padding: 0 6px;
  letter-spacing: 2px;
  border: none;
  box-shadow: none;
}


/* Arrows */
.page-arrow svg {
  width: 42px;
  height: 42px;
  vertical-align: middle;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
}

.page-arrow:hover svg {
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.9));
}

/* spacing tweaks */
.page-arrow.first { margin-right: 1px !important; } */
.page-arrow.prev { margin-right: 1px !important; }
.page-arrow.next { margin-left: 8px; }
.page-arrow.last { margin-left: 8px; }


/* --- Style for the FIRST PAGE double arrow --- */
.page-arrow.first {
  margin-right: 1px !important;       /* adjust spacing on the right */
}
/*************** ADD YOUR CUSTOM CSS HERE  ***************/
/*************** 24-oct-2025  ***************/
.event-meta-icons .meta-item {
  color: #e7e7ef;
  font-size: 16px;
}

.event-meta-icons i {
  color: #00bcd4; /* cyan accent */
  font-size: 18px;
}

.event-meta-icons span {
  font-weight: 500;
}

.meta-copy h1 {
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
}

.detail-copy p {
  color: #ddd;
  line-height: 1.7;
}

.subscription .cyan {
  color: #00bcd4;
}
/*************** fonts css  ***************/
/* Main wrapper */
.main.copy-detail {
  color: #e7e7ef !important;
  font-family: "itc-avant-garde-gothic-pro", sans-serif !important;
  margin-top: 100px !important;
}

/* Top event title */
.main.copy-detail .head h2 {
  font-size: 60px !important;
  text-transform: uppercase !important;
  font-weight: 100 !important;
  color: #3DA19F !important;
  font-family: "Metal Mania", Sans-serif !important;
}

/* Meta info row (date, time, location) */
.main.copy-detail .event-meta-icons span {
  font-size: 18px !important;
  color: #cfd3db !important;
}

.main.copy-detail .event-meta-icons i {
  color: #00bcd4 !important;
  font-size: 18px !important;
}

/* Event image + inner heading */
.main.copy-detail .meta-copy h1 {
  font-size: 28px !important;
  text-transform: uppercase !important;
  font-weight: 300 !important;
  color: #fff !important;
  font-family: "Metal Mania", Sans-serif!important;
}

/* Post content headings (inside content) */
.main.copy-detail .detail-copy h2 {
  font-size: 22px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #00bcd4 !important;
  margin-top: 30px !important;
}

/* Paragraphs inside content */
.main.copy-detail .detail-copy p {
  line-height: 1.7 !important;
  color: #fff !important;
  margin-bottom: 2rem !important;
  font: 400 18px "itc-avant-garde-gothic-pro", sans-serif !important;
}


/***** calendar thumbnail 10-30-25 *****?

/* Fixed-size thumbnail box */
.event-thumb {
  /* width: 350px;*/
  /* height: 175px;*/
  overflow: hidden;            
  /*border-radius: 0px;          */
  /*border: 1px;*/
  /*background: #f5f5f5; */        
}

/* Make the image fill the box, cropping as needed from top center */
.event-thumb img {
   /* width: 100%;*/
   /* height: 100%;*/
  /*border-radius: 0 !important;	*/
  display: block;
  /*object-fit: cover;  */         
  /*object-position: top center; */
  
}

/* If you want the box to not stretch full column width on small screens */
@media (max-width: 575.98px) {
  .event-thumb { margin: 0 auto 1rem; } /* center the box on mobile */
}


/*************** BLOG LISTING PAGE  ***************/
/*************** 27-oct-2025  ***************/
/* === Custom Blog Listing Styling (Exact Layout) === */

.main.blogs-wrap {
  position: relative;
  color: #e7e7ef;
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
}

.main.blogs-wrap .img-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.main.blogs-wrap .container {
  position: relative;
  z-index: 1;
}
.blog-row {
  border-bottom: 1px solid rgba(255,255,255,0.15);
  display: flex;
}


.blog-row:last-child {
  border-bottom: none;
}

.blog-row .text h2 a {
  text-decoration: none;
  color: #48d1ce !important;
}

.blog-row .text h2 a:hover {
  color: #fff;
}

.blogs-wrap .blog-row .pic {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 205px !important;
    flex: 0 0 205px !important;
}
.blogs-wrap .blog-row h2 {
    color: #48d1ce !important;
    font:300 20px "Metal Mania",
        sans-serif !important;
}
.blogs-wrap .blog-row p {
    color: #fff!important;
    font:
        300 16px "itc-avant-garde-gothic-pro",
        sans-serif!important;
}

.blog-search input {
    background: #fff !important;
    border: 0 none !important;
    border-radius: 0px 0 0 0px !important;
    font: 20px "itc-avant-garde-gothic-pro", sans-serif !important;
    height: 54px !important;
    padding-inline: 1rem !important;
}
.blog-search button {
    background: #3da19f !important;
    border: 0 none !important;
    border-radius: 0 0px 0px 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    padding-inline: 1rem !important;
}

.blog-box {
    background: #535353;
    border-radius: 0px;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    padding: 2rem;
}

.blog-box h2 {
    color: #f8f2f2;
    font:
        30px "Metal Mania",
        system-ui;
}

.blog-box.category li {
    color: #f8f2f2;
    font:
        300 18px "itc-avant-garde-gothic-pro",
        sans-serif;
}

.blog-box a {
    color: inherit;
    text-decoration: none;
}


.blog-box.category ul li {
  margin-bottom: 10px;
}

.blog-box.category ul li a {
  color: #e7e7ef;
  text-decoration: none;
}

.blog-box.category ul li a:hover {
  color: #3fc0c9;
}

.blog-box .recent-box .img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 90px;
    flex: 0 0 90px;
    width: 90px;
}

.w-100 {
    width: 100% !important;
}
.blog-box .recent-box h2 {
    color: #f8f2f2;
    font:
        300 18px "itc-avant-garde-gothic-pro",
        sans-serif;
}
.blog-box .recent-box h3 {
    color: #48d1ce;
    font:
        300 15px "itc-avant-garde-gothic-pro",
        sans-serif;
}

.pagination {
  margin-top: 30px;
  text-align: center;
}

.pagination a, .pagination span {
  display: inline-block;
  color: #fff;
  padding: 8px 14px;
  border: 1px solid #3fc0c9;
  margin: 0 4px;
  border-radius: 4px;
  text-decoration: none;
}

.pagination a:hover,
.pagination .current {
  background: #3fc0c9;
  color: #000;
}

/* === Custom Single Blog Shortcode === */
.main.copy-detail {
  color: #e7e7ef;
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
}

.main.copy-detail .head h2 {
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
}

.main.copy-detail .head h3 {
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  margin-top: 5px;
}

.meta-copy h1 {
  color: #3fc0c9;
  font-weight: 700;
}

.detail-copy p {
  font-size: 18px;
  color: #e7e7ef;
  margin-bottom: 20px;
}

/*************** 28-oct-2025  ***************/
/* ====== Event Listing Mobile Layout ====== */
/* ======= Mobile layout: Date + Image side by side ======= */
/* ====== Mobile: Date + Image in same row ====== */
/* ====== Mobile: Date box overlapping the image ====== */
/* ====== Mobile: Date and thumbnail in the same row ====== */

/*19-12-2025*/
/* Mobile only */
@media (max-width: 767px) {
    .blogs-wrap .blog-row p {
    font: 300 14px "itc-avant-garde-gothic-pro", sans-serif !important;
}
    .blogs-wrap .blog-row h2 {
    font: 300 26px "Metal Mania", sans-serif !important;
    margin: 0 0 1rem !important;
}
    .blog-row .pic {
    margin-right: 0 !important;
    margin-bottom: 15px;
  }
    .blog-row {
    display: block !important;
  }
  .container .event-row .col-md-7 h2 {
    font-size: 16px; /* adjust as needed */
    line-height: 1.3; /* optional but recommended */
  }
  .event-row > [class*="col-"] {
    padding: 0px;
}
.event-row .date .num {
    font: 600 24px "itc-avant-garde-gothic-pro", sans-serif;
}
.container {
        padding-left: 0px;
        padding-right: 0px;
    }
    /* .event-thumb img {
    width: 76%;
    height: 76%;
        
    }*/
    
    .event-thumb {
        margin: 4rem auto 0rem;
    }
}
@media (max-width: 479px) {
    .container {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 850px) {
  .container .event-row .col-md-7 h2 {
    font-size: 20px;
    line-height: 1.3;
  }

  .event-row > [class*="col-"] {
    padding: 0;
  }

  .event-row .date .num {
    font: 600 26px "itc-avant-garde-gothic-pro", sans-serif;
  }

  /*.event-thumb img {
    width: 70%;
    height: 70%;
  }*/

  .event-thumb {
    margin: 4rem auto 0;
  }
}


@media (max-width: 991px) and (min-width: 851px) {
    .container .event-row .col-md-7 h2 {
    font-size: 20px; /* adjust as needed */
    line-height: 1.3; /* optional but recommended */
  }
/*  .event-row > [class*="col-"] {*/
/*    padding: 0px;*/
/*}*/
.event-row .date .num {
    font: 600 26px "itc-avant-garde-gothic-pro", sans-serif;
}

    /*.event-thumb img {
    width: 70%;
    height: 70%;
        */
    }
    
    .event-thumb {
        margin: 4rem auto 0rem;
    }
}

@media (max-width: 1225px) and (min-width: 992px) {
    .container .event-row .col-md-7 h2 {
    font-size: 22px; /* adjust as needed */
    line-height: 1.3; /* optional but recommended */
  }
  /*.event-row > [class*="col-"] {*/
  /*  padding: 0px;*/
  /*  }*/
.event-row .date .num {
    font: 600 28px "itc-avant-garde-gothic-pro", sans-serif;
}

    /*.event-thumb img {
    width: 79%;
    height: 79%;
        
    }*/
    
    .event-thumb {
        margin: 4rem auto 0rem;
    }
}