@import 'bootstrap/dist/css/bootstrap.min.css';
@import '@fortawesome/fontawesome-free/css/all.min.css';

body {
  background-color: #000;
  color: #fff;
  font-family: 'Roboto', sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
label,
input,
button {
  font-family: 'Roboto', sans-serif;
}

.custom-scrollbar::-webkit-scrollbar {
  display: none;
}

.customstylebtn {}

.custom-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.textinnerpage1 {
  font-family: Roboto;
  font-size: 48px;
  font-weight: 600;
  line-height: 56.25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #FFFFFF;

}

.textinnerpage2 {
  font-family: Roboto;
  font-size: 20px;
  font-weight: 400;
  line-height: 23.44px;
  letter-spacing: 0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #FFFFFF;
}

.webtextinner {
  font-family: Roboto;
  font-size: 20px;
  font-weight: 400;
  line-height: 23.44px;
  letter-spacing: 0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #FFFFFF;
  margin: 0px !important;
}

.topdiv {
  max-width: 708px;
}

.webtextinner1 {
  font-family: Roboto;
  font-size: 20px;
  font-weight: 700;
  line-height: 23.44px;
  letter-spacing: 0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #D80E43;
  margin: 0px !important;

}

.dashmain {
  padding: 64px 83px 0px 78px;
}

.topimagestyle1 {
  height: 550px;
  /* width: 550px; */
}

.inputstyle {
  max-width: 570px;

}

.custom-nav-text {
  font-family: 'Roboto', sans-serif;
  font-size: 22.39px;
  font-weight: 400;
  line-height: 35.82px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #FFFFFF;
  margin: 0px 0px 0px 2px !important;
}

.navicons {
  margin-left: 63px !important;
}

.bookmarkbutton {
  width: 493.98px;
  height: 69px;
  border-radius: 15.68px;
  background: #212529;
  font-family: Roboto;
  font-size: 25.09px;
  font-weight: 400;
  line-height: 37.64px;
  text-align: center;
  color: #FFFFFF;
  border: none;


}

.vidimagestyle {
  width: 455px;
  height: 809px;
}

.logo {
  height: 76px;
  width: 196px;
}

@media (min-width: 991px) and (max-width: 1390px) {
  .custom-styles {
    width: 30% !important;
  }

  .logo1 {
    width: 270px !important;
    Height: 100px !important
  }
}

@media (max-width:1190px) {
  .custom-nav-text {
    font-size: 20px;
  }

  .logo1 {
    width: 230px !important;
    Height: 70px !important
  }

  .welcome-text {
    font-size: 42px;
    padding-left: 0px !important;
  }

  .category-title {
    padding: 0px 48px !important;
  }

  .textinnerpage2 {
    font-size: 17px;
  }

  .textinnerpage1 {
    font-size: 45px;
  }

  .topimagestyle1 {
    height: 450px;
    /* width: 450px; */
  }

  .bookmarkbutton {
    width: 100%;
  }

  .navicons {
    margin-left: 40px !important;
  }

  .logo {
    height: 66px;
    width: 176px;
  }

  .subscription-details,
  .subscription-details span {
    font-size: 25px;
  }

  .subscription-details1 {
    font-size: 19px;
  }
}

@media (max-width:1030px) {
  .textinnerpage2 {
    font-size: 14px;
  }

  .newsmain {

    padding: 40px 55px 0px 55px;
  }

  .textinnerpage1 {
    font-size: 30px;
  }

  .navicons {
    margin-left: 20px !important;
  }

  .topimagestyle1 {
    height: 375px;
    /* width: 375px; */

  }

  .logo {
    height: 57px;
    width: 150px;
  }

  .custom-nav-text {
    font-size: 16px;
  }

  .navbar-nav {
    gap: 5px;
  }

  .logo1 {
    width: 210px !important;
    Height: 70px !important
  }

  .welcome-text {
    font-size: 40px;
    padding-left: 0px !important;
  }

  .category-title {
    padding: 0px 38px !important;
  }
}

@media (max-width:770px) {

  .navbar-nav {
    gap: 10px;
  }

  .newsmain {

    padding: 40px 35px 0px 75px;
  }

  .vidimagestyle {
    width: 100%;
    height: 750px;
  }

  .topimagestyle1 {
    /* width: 100%; */
    height: 320px;
  }

  .logo {
    height: 50px;
    width: 120px;
  }
  .navicons {
    margin-left: 0px !important;
}
  .textinnerpage2 {
    font-size: 12.5px;
  }

  .textinnerpage1 {
    font-size: 31px;
    line-height: 40px;
  }

  .logo1 {
    width: 179px !important;
    Height:55px !important
  }

  .welcome-text {
    font-size: 33px;
    padding-left: 0px !important;
  }

  .category-title {
    padding: 0px 30px !important;
  }

  .custom-nav-text {
    font-size: 14px;
  }
}

.newsmain {
  background: linear-gradient(180deg, #000000 0%, #D80E43 148.72%);
  padding: 63px 73px 0px 78px;
  height: 100vh;
}

.bg-black {
  background-color: #000;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.2rem;
  color: #fff;
}

.newstext1 {
  font-size: 40px;
  line-height: 60px;
}

.nav-link {
  gap: 5px;
  color: #fff;
}

.badge {
  font-size: 0.75rem;
}

.navbar {
  padding: 1rem 2rem;
}

.horizontal-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.card {
  transition: transform 0.2s;
}

.card:hover {
  transform: scale(1.02);
}

.btn-danger {
  background-color: #dc3545;
  border: none;
  padding: 0.5rem 2rem;
}

.btn-outline-danger {
  border-color: #dc3545;
  color: #dc3545;
}

.btn-outline-danger:hover {
  background-color: #dc3545;
  color: white;
}

.text1 {
  font-weight: 400;
  font-size: 16px;
  color: white;

  margin-bottom: 5px;
}


.text2 {
  font-size: 14px;
  color: white;
}

.newsbottomdiv {
 
}

.badge {
  position: relative;
  top: -5px;
}

/* Join Page Styles */
.custom-input {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 25px;
  padding: 0.8rem 1.2rem;
}

.custom-input:focus {
  background-color: transparent;
  color: white;
  border-color: #dc3545;
  box-shadow: none;
}

.custom-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.password-field {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.form-check-input {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}

.form-check-input:checked {
  background-color: #dc3545;
  border-color: #dc3545;
}

.form-check-label {
  color: rgba(255, 255, 255, 0.8);
}
@media(max-width:575px)
{
  .logo1 {
    width: 140px !important;
    Height:40px !important
  }

  .welcome-text {
    font-size: 27px;
    padding-left: 0px !important;
  }
  .navicons {
    margin-left: 0px !important;
}
}