@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.navbar-scroll .nav-link,
.navbar-scroll .fa-bars {
  color: #000000;
}

.navbar-scrolled .nav-link{
  color: #000000;
}

.navbar-scrolled {
  background-color: #fff;
}
.navbar-nav li{
font-size: 15px;
line-height:40px;
color: #000000;
font-weight:600;
font-family: 'Inter'; 
}
.navbar .container, .footer-checkout .container{
max-width:1330px !important;
}
.button a{
background: #FF62D3;
color: #fff;
padding: 10px 22px;
border-radius: 12px;
font-size:15px;
}
.button a:hover{
  color: #fff !important; 
  scale: 1.008;
  filter: drop-shadow(2px 4px 6px #0000002f);
}
.navbar-nav li {
transition: opacity 0.3s ease-in-out;
}
.form-check-checkout a{
    color:#000;
    text-decoration: underline;
}
.form-check-checkout a:hover{
    color: #EC7E4A;
}
.navbar-nav li:hover{
opacity: 1;
color: #000000;
}
.content{
    max-width: 590px;
    box-shadow: 0px 4px 28px 0px #00000024;
    background: #fff;
    border-radius: 30px;
    padding: 35px 26px;
}
.main-content  #payment-form input{
  font-family: "DM Sans", serif;
}
.navbar-nav:hover li {
opacity: 0.4;
}

.navbar-nav:hover li:hover {
opacity: 1;
}
.header{
border-bottom:1px solid #F2F2F2;
}
.main-content {
background: url(../images/bg-checkout.png) no-repeat ;
background-size: auto;
background-position: top;
}
.main-content input{
    border: 1px solid #E9E9E9 !important;
    box-shadow: 0px 0px 4px 0px #0000000D !important;
}
@media screen and (min-width:2000px) {
  .main-content {
    background-size: 100% 90%;
    }
}
footer{
  padding-top: 0 !important;
}
.main-content h1{
  font-family: "DM Sans", serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 55px;
}
.main-content p{
  font-family: "DM Sans", serif;
  font-size: 14px;
  line-height: 21px;
  color: #4F4F4F;
}
.subscription{
  background: #F4F4F4;
  border-radius: 4px;
  border: 1px solid #ECECEC;
}
.subscription p{
  color: #333333;
  font-size: 16px;
  font-weight: 700;
  font-family: "DM Sans", serif;
}
.main-content .form-check-input:checked{
  background-color: #244BEE !important;
}
.main-content #submit{
  background-color: #EC7E4A;
  border-radius: 100px;
}
#button-text {
font-size: 24px;
}
.footer-content p{
  font-family: "DM Sans", serif;
  opacity: 0.6;
}
.footer-content p:hover{
  opacity: 1;
}
.copyright p{
  font-size: 16px;
}
.form-check-checkout label{
  font-family: "DM Sans" , serif;
}
@media screen and (max-width:768px) {
  .header-inner {
      width:100%;
  }
  .navbar-toggler{
      border:none;
  }
  .navbar-toggler:focus{
      box-shadow: none;
  }
  .main-content h1{
    max-width: 80%;
    margin: auto;
    font-size: 25px;
    line-height: 32px;
    margin-bottom: 15px;;
  }
  #button-text {
      font-size: 18px;
  }
  .main-content {
      background: #FAFAFA ;
     }
     .footer-content{
      font-family: "DM Sans", serif;
      opacity: 1;
    }
    .navbar-collapse.show{
      height:100vh;
    }
}
@media screen and (min-width:768px) {
  .checkout-border-btm {
      border-bottom: 1px solid #808688;
  }
}
/* Base styling for the hamburger button */
.navbar-toggler.hamburger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Container for the three lines */
.hamburger-lines {
  display: block;
  position: relative;
  width: 30px;
  height: 20px;
}

/* Each line styling */
.hamburger-lines .line {
  position: absolute;
  right: 0;
  width: 100%;
  height: 3px;
  background-color: #1C1B1F; /* Adjust color as needed */
  transition: all 0.3s ease;
}

/* Positioning the three lines */
.hamburger-lines .line1 {
  top: 0;
}
.hamburger-lines .line2 {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger-lines .line3 {
  bottom: 0;
}

/* Animate to cross when active */
.navbar-toggler[aria-expanded="true"] .line1 {
  transform: rotate(45deg) translate(7px, 5px);
}

.navbar-toggler[aria-expanded="true"] .line2 {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .line3 {
  transform: rotate(-45deg) translate(7px, -5px);
}