/* Add any additional custom styles here */
    .hr-blurry {
      border: none;
      height: 1px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

    }


    .hr-category {
      border: none;
      height: 1px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
      margin-top: 30px; /* Adjust as needed */
     margin-bottom: 30px; /* Adjust as needed */
    }

    .hr-blurry_no_spacing {
      border: none;
      height: 1px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

    }


    .hr-dark-black {
      background-color: #000;
    }

.custom-padding {
    padding-right: 40px; /* Adjust the padding as needed */
    padding-left: 40px; /* Adjust the padding as needed */
}


.post_list.post_grid_style_1 {
    padding-left: 100px; /* Adjust the value as needed */
    padding-right: 100px; /* Adjust the value as needed */
}

/* Adjust padding for mobile devices */
@media (max-width: 991px) {
    .post_list.post_grid_style_1 {
        padding-left: 10px; /* Adjust the value as needed */
        padding-right: 10px; /* Adjust the value as needed */
    }
}


a {
    text-decoration: none !important;
}

    #big-article {
      
      text-align: center;
    }

    .article {
      
      padding: 20px;
      margin-bottom: 20px;
    }

  /* Your existing styles */
  
  #article1, #article3 {
    padding: 0; /* Remove padding */
  }

  #big-article {
 border-left: none;
border-right: 1px solid #E5E5E5;
border-left: 1px solid #E5E5E5;
height: 12em;

}


   #big-article11 {
      
      text-align: center;
    }
  #big-article11 {
 border-left: none;
border-right: 1px solid #E5E5E5;
border-left: 1px solid #E5E5E5;
height: 40em;

}
@media (max-width: 768px) {
  #big-article11 {
    height: 35em; /* Adjusted height for mobile */
  }
}


   .play-button {
        position: relative;
        display: inline-block;
    }

    .play-button img {
        display: block;
    }

    .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px; /* Adjust size as needed */
        height: 50px; /* Adjust size as needed */
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .play-icon:before {
        content: "\25B6"; /* Unicode character for play button */
        font-size: 24px; /* Adjust size as needed */
        color: white;
}

.top-search {
    position: relative;
}

.search-box {
    display: none;
}

.search-box.activee {
    display: inline-block;
}

  .custom-input {
    border: 1px solid #ccc; /* Add a border */
    font-family: brandon; /* Use the same font as the surrounding text */
    /* Add other styles as needed */
  }

.search-box input[type="text"] {
    height: 24px; /* Adjust the height as needed */
    padding: 5px; /* Add padding for a better appearance */
    border: 1px solid #ccc; /* Add a border for visual separation */
    border-radius: 4px; /* Round the corners of the input */
}

/* Styles for tablets (min-width: 600px) */
@media (min-width: 600px) {
  .top-article .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Styles for mobile (max-width: 599px) */
@media (max-width: 599px) {
  .top-article .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {

.top-article{
margin-top: 10px;
margin-bottom: 10px;

}


    
.col-md-2 {
    margin: 0 40px 40px; /* Adjusted margin values for smaller screens */
  }

  /* Additional padding for the bottom of the footer */
  .footer-14398 {
    padding-bottom: 40px; /* Adjust as needed */
  }

  @media (max-width: 767px) {
    /* Styles for screens with a maximum width of 767px (phones) */

    /* Reset margins for all columns to create a single column layout */
    .col-md-2 {
      margin: 0 0 20px; /* Adjusted margin values for smaller screens */
    }

    /* Center align the text within the columns */
    .col-md-2,
    .col-md-6,
    .col-md-7 {
      text-align: center;
    }

    /* Increase font size for smaller screens */
    .col-md-2 ul.links,
    .col-md-6 ul.link-menu,
    .col-md-7 ul.social-icons-row {
      font-size: 14px;
      
    }

    /* Adjust spacing between sections */
    .col-12.pb-4 {
      padding-bottom: 20px;
    }
  }


    .search-box input[type="text"] {
        width: 100%;
    }



  @media (max-width: 768px) {
    .top-search.woad {
      display: none;
    }
  }

.woad2 {
  display: none;
}

@media only screen and (max-width: 768px) {
  .woad2 {
    display: block;
  }
}


}




  .foots {
    margin-bottom: 40px; /* Adjust this value to increase/decrease the spacing */
  }
  
  .full-width-container {
        max-width: 1700px;
        margin: 0 auto;
        padding: 40px; /* Adjust padding as needed */
    }
    .article {
        padding-top: 10px; /* Adjust padding as needed */
    }


@media (min-width: 992px) { /* Apply the styles only on screens with width >= 992px (lg and xl screens) */
    .with-border {
        border-right: 1px solid #ccc; /* Adjust the color and thickness as needed */
        padding-right: 30px; /* Add some spacing between the border and content */
    }
}

@media (min-width: 992px) { /* Apply the styles only on screens with width >= 992px (lg and xl screens) */
    .with-border11 {
        border-right: 1px solid #ccc; /* Adjust the color and thickness as needed */
        padding-right: 30px; /* Add some spacing between the border and content */
        height: 26em;
    }
}



    /* styles.css */
.big-video {
    width: 70%; /* Increase width of big article */
    /* Other styles for the big-video class */
}

@media (max-width: 767px) {
    /* Styles for screens with a maximum width of 767px (phones) */
    .big-video {
        width: 100%; /* Set width to 100% on phones */
        /* Additional styles for phones if needed */
                    margin-left: 7px;

    }
}


/* Media query for screens with max width 768px (typical for mobile) */
@media (max-width: 768px) {
     .shorts { /* Adjust the column class for medium screens */
        width: 100%; /* Make the column take up the full width on mobile */
        margin-bottom: 20px; /* Add margin between columns on mobile */
    }

    /* Increase the video width on mobile */
    .latest_style_1_item iframe {
        width: 100%; /* Set the video width to 100% of its container */
        height: auto; /* Let the height adjust proportionally */
    }

    /* Adjustable padding for mobile layout */
    .short_videos {
        padding: 5px; /* Adjust padding as needed for mobile layout */
        margin-bottom: 10px; /* Adjust margin as needed for mobile layout */
        margin-top: 17px;
    }

}

                        .social-icon img:hover {
                          transform: scale(1.5); /* Increase the scale for hover effect */
                        }