/* Reset some default padding and margins */

@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Dancing+Script:wght@600&family=Honk&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Orbitron:wght@400..900&family=Outfit:wght@100..900&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
  }
  
  /* Set a font family for the whole page */
  body {
    font-family:  "Josefin Sans", sans-serif;
    background-color: #f8f9fa;
    color: white;
    line-height: 1.6;
  }
  
  /* Style for the navbar */
  .navbar {
    background-color: black;
    font-weight: 800px;
    
  }
  
  .navbar-brand {
    font-size: 1.5rem; /* Increased font size */
    color: #fff;
    height: 60px;
    width: 55px;  
  }
  
  .navbar-nav .nav-link {
    color: #fff;
    margin-right: 1rem; /* Add spacing between links */
    
  }
  
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    color: white; /* Highlight color when hovering or focusing */
  }
  
  .podcast-section {
    background-color: black;
    padding: 50px 0;
    height: 490px;
  }
  
  .podcast-section h2, .podcast-section .btn-podcast {
    color: #c62632;
    margin-bottom: 30px;
    font-weight: 600;
    
  }
  
  .podcast-section p, .podcast-section .btn-podcast:hover {
    color: white;
    font-weight: 700;
  }
  
  .text-container {
    margin-top: 20px;
  }
  
  .img-fluid {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
  }
  
  
  
  
  .navbar-nav .nav-link {
    position: relative;
    display: inline-block;
    color: #fff; /* or any color you prefer */
  }
  
  .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px; /* Thickness of the underline */
    bottom: -5px; /* Distance from the text */
    left: 50%;
    background-color: #c62632; /* Color of the underline */
    transition: width 0.3s ease, left 0.3s ease; /* Animation effect */
  }
  
  .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link:focus::after {
    width: 100%; /* Full width of the text */
    left: 0; /* Align with the start of the text */
  }
  

  .btn-listen {
    width: 6.7em;
    height: 2.5em;
    margin: 0.5em;
    background: black;
    color: #c62632;
    border: 0px solid rgb(215, 207, 207);
    border-radius: 0.625em;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: 20px;
   }
   
   .btn-listen:hover {
    color: white;
   }
   
   .btn-listen:after {
    content: "";
    background: #c62632;
    position: absolute;
    z-index: -1;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(-45deg) scale(0, 1);
    transition: all 0.5s;
   }
   
   .btn-listen:hover:after {
    transform: skewX(-45deg) scale(1, 1);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
   }
 

   .episodes-section .card {

    background-color: white; /* Dark background for the card */
    border: 2px solid #c62632;
    border-radius:6px;
    
  }
  
  .episodes-section .card .btn-primary {
    background-color: #c62632; /* Custom color for the button */
    border-color: #c62632; /* Ensure the border matches the button color */
  }
  
  .episodes-section .card .btn-primary:hover {
    background-color: #a51c25; /* Darker shade for hover state */
    border-color: #a51c25; /* Match border color on hover */
  }

  .episodes-section {
    background-color: white;
    color: #c62632;
    font-family: "Josefin Sans", sans serif;
    
  }
  

  .card-title {
    color: #c62632;
  }

  .card-text {
    color: black;
  }

  .btn-all {
    width: 6.7em;
    height: 2.5em;
    margin: 0.5em;
    background: white;
    color: #c62632;
    border: 2px solid #c62632;
    border-radius: 0.625em;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    position: relative;
    margin-left: 900px;
    margin-top:70px;
    bottom:30px;
   }
  
   
   .btn-all:hover {
    color: white;
   }
   
   .btn-all:after {
    content: "";
    background: #c62632;
    position: absolute;
    z-index: -1;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(-45deg) scale(0, 1);
    transition: all 0.5s;
   }
   
   .btn-all:hover:after {
    transform: skewX(-45deg) scale(1, 1);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
   }

   .info-section {
    background-color: rgb(17, 15, 15);
    color: white;
    padding: 50px 0;
  }
  .info-section h2 {
    color: #c62632;
    margin-bottom: 40px;
  }
  .info-icon {
    font-size: 4em;
    color: #c62632;
    margin-bottom: 20px;
  }
  .info-text {
    color: #aaa;
  }
 
  .about-host-section {
    padding: 50px 0;
    background-color: black; /* Specific section background */
    height: 100%;
   
    
  }
  .about-host-section h2 {
    color: #c62632; /* Red color for headings */
    font-weight: 600;
    margin-top: 50px;

  }
  .about-host-section p {
    margin-top: 30px;
    color: white; /* White color for paragraph text */
  }
  .host-image {
    max-width: 100%;
    width: 400px;
    left: 100px;
    position: relative;
    top: 40px;

    height: auto;
    border-radius: 300px; /* Optional: for rounded corners */
    border: 3px solid #a51c25; /* Red border around the image */
  }
  .about-host-text {
    margin-bottom: 20px;
  }

  .newsletter-section {
    background-color: black; /* Dark background */
    color: #fff; /* White text */
    padding: 80px 0;
    text-align: center;
  }
  .newsletter-header h2 {
    color: #c62632;
    margin-bottom: 15px;
  }
  .newsletter-header p {
    color: white; /* Light grey text */
    margin-bottom: 30px;
  }
  .newsletter-input-group {
    max-width: 500px;
    margin: auto;
  }
  .newsletter-input-group input {
    
    border-radius: 5px;
    padding: 15px;
    margin-right: -1px; /* Aligns button with input field */
  }
  .newsletter-input-group button {
    border: none;
    background-color: #c62632; /* Reddish button background */
    color: #fff;
   
    cursor: pointer;
    margin-top: 20px;
  }
  .newsletter-footer {
    margin-top: 60px;
    font-size: 0.9em;
    color: #aaa;
  }
  .social-icons {
    font-size: 1.5em;
    margin-top: 30px;
  }
  .social-icons i {
    margin: 0 10px;
    color: #aaa; /* Light grey icons */
  }
  .social-icons i:hover {
    color: #fff; /* White icons on hover */
  }


  .btn-sub {
    width: 7em;
    height: 2.7em;
    
    background: white;
    color: #c62632;
    border: 2px solid #c62632;
    border-radius: 0.625em;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    
    
   
   }
   
   .btn-sub:hover {
    color: #c62632;
   }
   
   .btn-sub:after {
    content: "";
    background: white;
    position: absolute;
    z-index: -1;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(-45deg) scale(0, 1);
    transition: all 0.5s;
   }
   
   .btn-sub:hover:after {
    transform: skewX(-45deg) scale(1, 1);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
   }

   .but-link {
    color: #c62632;
   }

   .but-link:hover {
    color: white;
    text-decoration: none;
   }


   .episode-header {
    background-color: #f8f9fa;
    color: #c62632;
    padding: 20px 0;
    text-align: left;
    font-size: 2em;
    font-weight: 600;
  }
  .episode-content {
    padding: 40px 0;
    color: black;
  }
  .episode-image {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    
  }
  .episode-info {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
  }
  .episode-title {
    color: #c62632;
    font-size: 1.75em;
    margin-bottom: 10px;
    font-weight: 700;

  }
  .episode-description {
    color: black;
    font-weight: 500;
    
  }


  audio {
    width: 100%;
    height: auto;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    outline: none;
  }

  /* For browsers that support this */
  audio::-webkit-media-controls-panel {
    background-color: #fff;
    border-radius: 10px;
  }

  audio::-webkit-media-controls-play-button,
  audio::-webkit-media-controls-volume-slider,
  audio::-webkit-media-controls-mute-button,
  audio::-webkit-media-controls-timeline,
  audio::-webkit-media-controls-current-time-display,
  audio::-webkit-media-controls-time-remaining-display {
    color: #333;
  }

  .social-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    position: relative;
    /* overflow: hidden; */
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .svgContainer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    backdrop-filter: blur(0px);
    letter-spacing: 0.8px;
    border-radius: 10px;
    transition: all 0.3s;
    border: 0px solid rgba(156, 156, 156, 0.466);
  }
  
  .BG {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(48, 47, 47);
    z-index: -1;
    border-radius: 10px;
    pointer-events: none;
    transition: all 0.3s;
  }
  
  .social-icon:hover .BG {
    transform: rotate(35deg);
    transform-origin: bottom;
  }
  
  .social-icon:hover .svgContainer {
    background-color: rgba(207, 207, 207, 0.466);
    backdrop-filter: blur(4px);
  }

  .Btninsta {
    margin-left: 20px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    position: relative;
    /* overflow: hidden; */
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .svgContainerinsta {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    backdrop-filter: blur(4px);
    letter-spacing: 0.8px;
    border-radius: 10px;
    transition: all 0.3s;
    border: 0px solid rgba(156, 156, 156, 0.466);
  }
  
  .BGinsta {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #f09433;
    background: -moz-linear-gradient(
      45deg,
      #f09433 0%,
      #e6683c 25%,
      #dc2743 50%,
      #cc2366 75%,
      #bc1888 100%
    );
    background: -webkit-linear-gradient(
      45deg,
      #f09433 0%,
      #e6683c 25%,
      #dc2743 50%,
      #cc2366 75%,
      #bc1888 100%
    );
    background: linear-gradient(
      45deg,
      #f09433 0%,
      #e6683c 25%,
      #dc2743 50%,
      #cc2366 75%,
      #bc1888 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    z-index: -1;
    border-radius: 9px;
    pointer-events: none;
    transition: all 0.3s;
  }
  
  .Btninsta:hover .BGinsta {
    transform: rotate(35deg);
    transform-origin: bottom;
  }
  
  .Btninsta:hover .svgContainerinsta {
    background-color: rgba(156, 156, 156, 0.466);
  }

  .icon-container {
    display: flex;
  flex-direction: row;
  padding-top: 30px; 
    }
  

  .btn-fb {
    margin-left: 20px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    position: relative;
    /* overflow: hidden; */
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .svgContainerfb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    backdrop-filter: blur(0px);
    letter-spacing: 0.8px;
    border-radius: 10px;
    transition: all 0.3s;
    border: 1px solid rgba(156, 156, 156, 0.466);
  }
  
  .BGFB {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #1877f2;
    z-index: -1;
    border-radius: 10px;
    pointer-events: none;
    transition: all 0.3s;
  }
  
  .btn-fb:hover .BGFB {
    transform: rotate(35deg);
    transform-origin: bottom;
    backdrop-filter: blur(4px);
  }
  
  .btn-fb:hover .svgContainer {
    border: 1px solid rgba(230, 230, 230, 0.466);
    background-color: rgba(204, 204, 204, 0.466);
    backdrop-filter: blur(4px);
  }

  .podcast-color {
    color: #c62632;
  }

  a:hover {
   cursor: pointer;
   text-decoration: none;
    
  }
  iframe {
    padding-right: 50px;
  }
  

  @media (max-width: 768px) { /* Adjust for your mobile breakpoint */
    .podcast-section .container, .podcast-section .row, .podcast-section .col-md-6 {
      padding-bottom: 1px; /* Increase padding at the bottom */
      
    }
    iframe {
      width: 100%;
    }
    .btn-all {
      position: relative;
      right: 810px;
      margin-top: 70px;
    }
    .about-host-section {
      height: 100%;
      margin-bottom: -300px;

    }
    .row1 {
      flex-direction: column-reverse;
      margin-right: 100px;
      padding-bottom: 50px;
    }
    .host-image {
      width: 100%;
      height: 100%;
    }
    

  }
  .row1 {
    display: flex;
    align-items: center;
  }
  
  

  @media (max-width: 768px) {
    .newsletter-section {
      position: relative;
      margin-top: 300px;
    }

   }

  @media (max-width:768px) {
    .podcast-section {
      height: 800px;
      background-color: black;
     }
     
  }
  @media (max-width:768px) {
    .episode-section {
      position: relative;
      bottom: 600px;
     }
     
  }

  .listen-yt {
    background-color: #c62632;
    border: 0px solid ;
    border-radius: 5px ;
  }
  .listen-yt:hover {
    background-color: #a51c25;
  }


  .Btn-yt {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    position: relative;
    /* overflow: hidden; */
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.3s;
    margin-left: 20px;
  }
  
  .svgContaineryt {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    backdrop-filter: blur(0px);
    letter-spacing: 0.8px;
    border-radius: 10px;
    transition: all 0.3s;
    border: 1px solid rgba(156, 156, 156, 0.466);
  }
  
  .BGyt {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #ff0000;
    z-index: -1;
    border-radius: 10px;
    pointer-events: none;
    transition: all 0.3s;
  }
  
  .Btn-yt:hover .BGyt {
    transform: rotate(35deg);
    transform-origin: bottom;
  }
  
  .Btn-yt:hover .svgContaineryt {
    border: 1px solid rgba(255, 110, 110, 0.466);
    background-color: rgba(219, 219, 219, 0.466);
    backdrop-filter: blur(4px);
  }
  

  
   

.white-text {
  color: #f8f9fa;
}

.top-txt {
  font-family: "Open Sans", sans-serif;
}