@font-face {
    font-family: 'Inter';
    src: url('/assets/font/Inter-Light.otf') format('opentype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/font/Inter-Regular.otf') format('opentype');
    font-weight: 400; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/font/Inter-Bold.otf') format('opentype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/font/Inter-ExtraBold.otf') format('opentype');
    font-weight: 800; /* ExtraBold */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/font/Inter-ExtraLight.otf') format('opentype');
    font-weight: 200; /* ExtraLight */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/font/Inter-Medium.otf') format('opentype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/font/Inter-SemiBold.otf') format('opentype');
    font-weight: 600; /* SemiBold */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/font/Inter-Thin.otf') format('opentype');
    font-weight: 100; /* Thin */
    font-style: normal;
}




 body{
font-family: 'Inter'!important;
 }
 .main-header{
  background-repeat: no-repeat;
  background-size: cover;
  height: 80vh;
 }
 .HeaderDiv{
 position: absolute;
  text-align: center;
  left: 50%;
  transform: translate(-50%,-80%);
 }
.MainAfterDiv{
  padding-top:150px;
  background: #F9F9F9;
}
 .HeaderDiv h1{
    font-size: 3rem;
      
 }
 .text-grey{
  color: #8C8C8C;
 }
 .text-primary{
 color: #1E1C44!important;
 }
 .btnLargeComp{
  padding: 10px 80px!important;
 }
 .card-new{
  border-radius: 20px;
  padding: 35px 35px 25px 25px;
 }
 .form-control{
padding: 10px 25px;
font-size: 13px;
border-color: #EBECED!important;
 
border-radius: 10px;
font-weight: 200;
color: #AEB2B6!important;
 }
 .custom-select {
    padding: 10px 15px!important;
    font-size: 13px!important;
    border:1px solid #EBECED!important;
    max-width: 60px!important;
    border-right: none!important;
    border-top-right-radius: 0px!important;
        border-bottom-right-radius: 0px!important;
    border-top-left-radius: 10px!important;
        border-bottom-left-radius: 10px!important;
    font-weight: 200!important;
    color: #AEB2B6!important;
       appearance: none; /* Remove default arrow */
    background: none; /* Set a transparent background */
}
.input-group select.custom-select {
    border-right: none; /* Remove the right border */
}
 .border-separator {
    width: 1px; /* Thickness of the border */
    background-color: lightgrey; /* Color of the border */
    position: absolute;
    left: 52px;
    height: 11px; /* Adjust height as needed for your design */
    margin: 15px 5px; /* Space around the separator */
}

.input-group .tel {
  padding: 5px!important;

    border-left: none; /* Remove the left border */
    border-color: #EBECED; /* Ensure the border color is consistent */
    border-radius: 0 10px 10px 0!important; /* Rounded corners on the right */
}
 

.input-group {
    display: flex;
}

 .form-group{
  margin-bottom: 20px;
 }
 .privacy-header {
      background: linear-gradient(45deg, #FC5393,#FC5393, #F86F64, #F86F64);
      color: white;
      text-align: center;

      padding: 100px 0px 30px 0;
    }
    .privacy-header h1 {
      font-size: 3.5rem;
       

      margin-top: 20px;
    }
    .privacy-logo {
      
      height: auto;
    }
    .text-blue{
      color: #1E1C44;
    }
    .headText{
      font-weight: 400;
       font-size: 2.5rem;
     
    }
    p{
      line-height: 27px;
    }
    .btn-primary{
      background: #1E1C44;
      border-radius: 10px;
      padding: 10px 20px;
 border-color: #1E1C44;
     
    }
    .btnCompare{
            padding: 12px 40px;
    }
  .btn-primary-large{
      background: #1E1C44;
      border-radius: 10px;
      padding: 12px 50px;
      font-size: 13px;
    color: white;
      
    }
  .btn-primary-large:hover{
       background: #F86F63;
      border-color: #F86F63;
     color: white;
      
    }
    .btn-primary:hover{
      background: #F86F63;
      border-color: #F86F63;
    }
    .btn-round{
      border-radius: 18px;
    }
    .elegant-image{
      position: absolute;
      z-index: -10;
      top: 0px;
      right: 0;
    }
    .main-container{
      padding-top: 100px;
      
    }
    .font-lighter{
      font-weight: 600;
    }

    footer{
      background: #1E1C44;
      padding-top: 60px;
      padding-bottom: 60px;
      color: #9D9D9D;
      font-size: 13px;
    }

    footer a{
      list-style: none;
      color: #9D9D9D;
    }
     footer a:hover{
     
      color: #F86F63;
    }
#CompareModal .form-control{
  padding: 15px 25px;
  font-size: 14px;
}
#CompareModal .tel{
    padding: 15px 20px!important;
  font-size: 14px!important;
}
#CompareModal .border-separator{
    height: 20px;
    left: 59px;
}
#CompareModal .form-control:focus{
box-shadow: none!important;
}
#CompareModal .btnLargeComp{
font-size: 30px!important;
border-radius: 50px!important;
width: 70%!important;
      color: #172338;
}

.form-control:focus{
box-shadow: none!important;
}
    #CompareModal .modal-content{
      background: #172338;
          border-radius: 25px;
    border: 1px solid lightgrey;
    }

.logo-row {
    display: flex;
    flex-wrap: wrap; /* Allows logos to wrap into multiple lines on smaller screens */
    justify-content: center; /* Centers logos in the row */
}

.logo-item {
    flex: 1 1 20%; /* On large screens, each logo takes up 25% of the row */
    max-width: 130px; /* You can adjust this to control the size of the logos */
    text-align: center; /* Center align logos */
    align-items: center;
    display: flex;
    justify-content: center;
     filter: grayscale(100%); /* Applies grayscale effect */
    opacity: 0.5; 
}


.line-before::before {
    content: ''; /* Create a pseudo-element */
    display: block; /* Make it a block element */
    height: 1px; /* Height of the line */
    background-color: black; /* Line color */
    width: 120px; /* Length of the line */
    margin: 20px auto; /* Center the line */
}
.PackageDiv h5,.PackageDiv p{
  color: #363456;
}

.PackageDiv .card {
  width: 90%;
  margin: 0 auto;
    border: none; /* Light border around the card */
    border-radius: 15px; /* Rounded corners */
    padding: 30px; /* Inner padding for the card */
    transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
}

.PackageDiv .card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Shadow effect on hover */
}

.PackageDiv .card-img-top {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    max-height: 60px; /* Set a maximum height for the logos */
    object-fit: contain; /* Ensure logos maintain their aspect ratio */
}

.PackageDiv .card-title {
    margin-bottom: 0.5rem; /* Space between title and text */
    font-weight: 500; /* Make the title bold */
    font-size: 14px;
}

.PackageDiv .card-text {
    margin: 1.5rem 0; /* Space between text items */
}

.card-number{
  font-size: 20px;
  font-weight: 500;
}
 
 .interest {
    filter: blur(3px); /* Adjust the blur intensity as needed */
    color: rgba(0, 0, 0, 1); /* Optional: Set a color with transparency */
}



@media (max-width: 768px) {
    .logo-item {
        flex: 1 1 33.33%; /* On small screens, each logo takes up 33.33% (3 logos per row) */
    }
}

@media (max-width: 576px) {
    .logo-item {
        flex: 1 1 100%; /* On extra-small screens, each logo takes full width (1 per row) */
    }
}
    @media only screen and (max-width:1000px){
      h1{
        font-size: 2rem!important;
      }
      .MainAfterDiv{
  padding-top:700px;
}
        .btnCompare{
            padding: 12px 15px;
            font-size: 12px;
    }
    #CompareModal .btnLargeComp{
font-size: 18px!important;
 width: 100%!important;
      
}


    .HeaderDiv{
  
  transform: translate(-50%,-40%);
 }
       .elegant-image{
         top: 0px;
         width: 60%!important;right: 0px!important;
       }
       .PolImageDiv{
        height: 300px;
       }
    }