.profile li > div { background: #e6e7e8; box-shadow: 0px 0px 5px 1px #c3c2c3;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s; }
 .profile li > div div.img {background: #e6e7e8;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;position: relative;z-index: 2;}
 .profile li > div div.text { font-size: 14px; padding: 15px 10px 10px;background: #e6e7e8;position: relative;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s; }
 .profile li > div div.text:before {position: absolute;top: -1px;background: #36ae48;height: 8px;width: 100%;left: 0px;content: '';-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;}
 .profile li > div div.text * {position: relative;z-index: 2;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;}
 .profile li > div div.text h4 {color: #000; display: inline-block;}
 .profile li > div div.text h4 > img {vertical-align: middle;}
 .profile li > div div.text ul {list-style: none; margin: 10px 0px; padding:0px;}
 .profile li > div div.text ul > li{position: relative;padding:0px;padding-left: 25px;color:#000000;font-size: 14px;line-height: 20px;margin-bottom: 10px;display: block;}
 .profile li > div div.text ul > li > img{position: absolute; left: 0px; width: 20px; top: 3px;}
 .profile li > div div.text a { background:#36ae48; padding:8px 20px; color:#fff; font-size: 14px; border-radius:5px; margin:10px 0;   }

 .profile:hover li {position: relative;z-index: 2;}
 .profile:hover li:hover {z-index: 1;}
 .profile:hover li:hover > div {margin: 0px 0px 0px;}
 .profile li:hover > div div.img {margin-top: -10px;padding-bottom: calc(65% + 10px)}
 .profile li:hover > div div.text {padding-top: 25px;margin-bottom: -20px;}
 .profile li:hover > div div.text:before {height: 100%;}
 .profile li:hover > div div.text * {color: #fff;}
 .profile:hover li > div div.text a { background:#fff; color:#000000; }

 .profilebg{ background: url(img/profilebg.jpg) no-repeat; background-size: cover;}
 .profilebg div.text { font-size: 14px; padding: 15px 10px 10px;position: relative;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s; }
 .profilebg div.text * {position: relative;z-index: 2;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;}
 .profilebg div.text h4 {color: #000; display: inline-block;}
 .profilebg div.text h4 > img {vertical-align: middle;}
 .profilebg div.text ul {list-style: none; margin: 10px 0px; padding:0px;}
 .profilebg div.text ul > li{position: relative;padding:0px;padding-left: 25px;color:#000000;font-size: 14px;line-height: 20px;margin-bottom: 10px;display: block;}
 .profilebg div.text ul > li > img{position: absolute; left: 0px; width: 20px; top: 3px;}
 .profilebg div.text a { background:#36ae48; padding:8px 20px; color:#fff; font-size: 14px; border-radius:5px; margin:10px 0;   }
 .profilebg div.text a.whitebtn{  background:#fff; color:#000;  }
 .playbtn { cursor: pointer; position: relative;}
 .overlay {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     transition: .3s ease;
     /* background-color: rgba(0,0,0,0.1); */
   }

   .playbtn .overlay {
     opacity: 1;
   }
 .bg-green{background: #36ae48;}
 .cl-green{color: #36ae48;}


 /* .themecolor .nav-item a.nav-link  {color: #9d9f9f;}
 .themecolor .nav-item a.nav-link.active, .themecolor .nav-item a.nav-link:hover{ color:#515251; border-bottom-color: #36ae48; } */



 .formInner .tabbubble > ul{display:inline-block;}
 .formInner .tabbubble > ul > li{list-style:none;float:left;position:relative;}
 .formInner .tabbubble > ul > li::before{content:"";position:absolute;right:-16px;top:6px;z-index:5;border-top:1px solid #a9a9a9;border-right:1px solid #a9a9a9;transform:rotate(45deg) skew(0deg);border-radius:5px;width:35px;height:35px;background:#f1f4f4;}
 .formInner .tabbubble > ul > li:last-child::before{border-top:1px solid #f1f4f4;border-right:1px solid #f1f4f4;}
 .formInner .tabbubble > ul > li a{color:#515251;display:block;font-size:14px;line-height:28px;font-weight:600;padding:10px 26px;background:#f1f4f4;border-top-right-radius:5px;border-bottom-right-radius:5px;font-family:HarabaraMais}
 .formInner .tabbubble > ul > li.active::before{border-top:1px solid #36ae48;border-right:1px solid #36ae48;background:#36ae48;}
 .formInner .tabbubble > ul > li:first-child a{border-radius:5px;}
 .formInner .tabbubble > ul > li a > i{color:#36ae48;}
 .formInner .tabbubble > ul > li.active a{color:#fff;background:#36ae48;}
 .formInner .tabbubble > ul > li.active a > i{color:#fff;}
 .formInner .form-wraper .form-group label{color:#515251;font-size:16px;font-weight:600;display:block;}
 .formInner .form-wraper .form-group p{font-size:14px;line-height:18px;margin:0px;}
 .formInner .form-wraper .form-group input[type=text], .form-wraper .form-group input[type=email], .form-wraper .form-group input[type=date], .form-wraper .form-group input[type=password], .form-group select, textarea{border-radius:5px;border:1px solid #e6e6e6;padding:10px;width:100%;box-sizing:border-box;}
 .formInner .form-wraper .form-group{margin-bottom:20px;}
 .formInner .form-wraper .form-group table.table{margin-bottom:20px;}
 .formInner .form-wraper .form-group table.table thead tr{background:#f1f4f4;}
 .formInner .form-wraper .form-group .info-collect{background:#fdfdfd;padding:10px;border:1px solid #e6e6e6;border-radius:5px;}


 .fa-check-circle::before {
   content: "\f058";
 }


 @font-face{font-family:'HarabaraMais';src:url('fonts/HarabaraMaisBold-HarabaraMaisBold.woff2') format('woff2'),
 url('fonts/HarabaraMaisBold-HarabaraMaisBold.woff') format('woff');font-weight:600;font-style:normal;}
 /* @font-face{font-family:'HarabaraMais';src:url('fonts/HarabaraMaisLight-HarabaraMaisLight.woff2') format('woff2'),
 url('fonts/HarabaraMaisLight-HarabaraMaisLight.woff') format('woff');font-weight:300;font-style:normal;}
 h1, h2, h3, h4, h5, h6{font-family:HarabaraMais !important;} */

 /*body {
  font-family: Catamaran,sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 27px;
  color: #969696;
}*/

  /* font-family */
.font-HarabaraMais{
  font-family: HarabaraMais ,sans-serif !important;
}
.font-Raleway{
  font-family: Raleway, sans-serif !important;
}
.txt-cap {
    text-transform: capitalize !important;
}
.Catamaran {
  font-family: Catamaran,sans-serif !important;
  font-weight: 400;
}
/*End font-family */
/*Start font-size */
.font-50{
  font-size: 50px;
}
.font-35{
  font-size: 35px;
}
.font-30{
  font-size: 30px;
}
.font-23{
  font-size: 23px;
}
.font-16{
  font-size: 16px;
}
.font-17{
  font-size: 17px;
}
.font-15{
    font-size: 15px;
  }
  .font-14{
    font-size: 14px;
  }
  .font-13{
    font-size: 13px;
  }
  .font-10{
    font-size: 1px;
  }
/*End font-size */
/* Start font-weight */
.font-400{
  font-weight: 400;
}
.font-500{
  font-weight: 500;
}
.font-600{
  font-weight: 600;
}
.font-700{
  font-weight: 700;
}
.font-800{
  font-weight: 800;
}
/* End font-weight */
/*start colors */
/* .text-green{
  color:#36af49;
} */
.text-green{
  color:#ffc107 !important;
}
.grey-text, .grey-text a{
color: #505252;
}
.test{
  background-color: #f1f4f4;
}
.bg-green{
  background-color: #38b34b;
}
.bg-yellow{
  background-color: #F8B914;
}



a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, p a:hover {
  color: #71cbfe;
}




/*End colors */

    .img-height {
      height: 52px;
    }
    /* .nav-item a {
        color: #333;
        padding: 20px 14px !important;
        font-size: 18px;
        font-weight: 600;
        font-family: HarabaraMais ,sans-serif;
        margin: 0px 7px 0px 7px;
    } */
    .sign-button{
      background-color: #36af49;
      padding: 10px 31px 10px 31px;
    }
    .sign-button:hover{
      background-color: #36af49;
    }
    a:link {
     text-decoration: none;
    }
    .box{
        background:#f7fcf0;
    }
    .sing{
        font-family: HarabaraMais,sans-serif;
        color: #505252;
        font-size: 35px;
        font-weight: 600;
    }
    .required {
      color: red;
    }


@media(max-width:768px) {
    .nav-item a {
        padding: 10px 0px !important;
    }
    .signup-ul {
        padding: 10px 0px !important;
    }
}









/* new design css */



/* Show it is fixed to the top */
body {
  /*  min-height: 75rem;*/
    /* padding-top: 4.5rem; */
  }
  .edu-history-modal {
    max-width: 785px !important;
  }
  .navbar-nav .nav-link.clicked { color: #f6b42c !important; }
  .navbar-nav .nav-link.clicked:hover { color: #f6b42c !important;   }
  .navbar-nav a.nav-link { color: #1B1B1B !important; padding-bottom: 0px;  }
  .navbar-light .navbar-nav .nav-link.active,
  .navbar-light .navbar-nav .show > .nav-link,
  .navbar-light .navbar-nav .nav-link:focus,
  .navbar-light .navbar-nav .nav-link:hover {  color: #f6b42c !important;   border-bottom: 1px solid #f6b42c; }
  .banner { background: #1b1b1b url('/frontend/updated_images/banner.jpg') top right no-repeat; margin-top: 11px;  }

.heading1{ padding:0 50px; font-size:25px; text-transform: uppercase;
  background: url('/frontend/updated_images/heading1.png') no-repeat center center;
   background-size: contain;}
.heading2{ padding:0 50px; font-size:25px; text-transform: uppercase;
    background: url('/frontend/updated_images/heading2.png') no-repeat center center; background-size: contain;}
.heading3{ padding:0 50px; font-size:25px;
      background: url('/frontend/updated_images/heading3.png') no-repeat center center; background-size: contain;}


  .headingbg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/frontend/updated_images/headbefore.jpg') no-repeat center left;
    /* background-size: ; */
    z-index: 0;
    transform: translateY(-50%);
  }
  .headingbg {
    position: relative;
    display: inline-block;
    color: black;
    font-weight: bold;
    font-size: 1.75rem;
    padding:0 79px 0 83px;
  }
  .headingbg span { background:#f6b229; }
  .headingbg::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
    height: 100%;
    background: url('/frontend/updated_images/headafter.jpg') no-repeat center right;
    background-size: ;
    z-index: 0;
    transform: translateY(-50%);
  }

  .fixed-height {
    height: 100px; /* Set your desired height */
    object-fit: contain; /* Ensures images fill the area without distortion */
    width: 100%; /* Ensures it fills the column */
}

  .counslist { margin-bottom: 5rem !important;}
  .counslist .card { border-radius:10px; border: 0px solid transparent; margin:15px 15px; }
  .counslist .card .flag {position: absolute; top: -20px; right: 10px; z-index: 999; }
  .counslist .card .card-img-top { border-radius:12px; }
  .counslist .card .card-body { background: #1b1b1b; color:#fff; border-radius:10px; position:relative; top:-10px; z-index:99; }
  .counslist .card:hover .card-body { background: #f6b229; color:#fff; }
  .counslist .card:hover .card-body p { color:#000;  }
  .counslist .card .card-body p { color:#f6b229; margin-bottom:0;font-size:1rem }

  /* .counslist .col-md-4 .card :nth-child(3)  { border-bottom: none; background-color: red !important; } */

  /* DEMO GENERAL ============================== */
  .hover {  position: relative;  border-radius:10px; }
  .hover-overlay {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  z-index: 90;  transition: all 0.4s;  border-radius:10px;}
  .hover-3::after {
    content: '';
    width: calc(100% - 3rem);
    height: calc(100% - 3rem);
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 90;
    transition: all 0.3s;
    transform: scale(1.1);
    opacity: 0;
    display: block;
    opacity: 0;
    border-radius:10px;
  }

  .hover-3-content {
    position: absolute;  top: 50%;  left: 0;  width: 100%;  transform: translateY(-50%);  text-align: center;  z-index: 99; }
  .hover-3-description {  opacity: 0;  transform: scale(1.3);  transition: all 0.3s; }
  .hover-3 .hover-overlay { border-radius: 10px; }
  .hover-3:hover img {  transition: all 0.4s;  width: 100%; }
  .hover-3:hover::after {   opacity: 1;  transform: none; }
  .hover-3:hover .hover-3-description {  opacity: 1;  transform: none; }
  .hover-3:hover .hover-overlay {   background: rgba(0, 0, 0, 0.8); }


  [type="button"]:not(:disabled), [type="reset"]:not(:disabled),
   [type="submit"]:not(:disabled), button:not(:disabled) { z-index: 99;}

  .carousel-control-prev,
  .carousel-control-next {
    background-color: #f6b229;
    width: 5vh;
    padding: 5px;
    height: 5vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
  }
  .carousel-indicators {  z-index: 99; bottom: -50px;}
  .carousel-indicators [data-bs-target] { background:black; border-radius:50%; width:10px; height:10px; border:0 solid transparent; }

  .colleges {background-color:  #ca1d52;}
  .colleges .carousel-item .card{ padding:10px; text-align:center;}
  .colleges .carousel-item .card img { width:80%; display:inline-block; text-align:center; margin:0 auto;  }
  .testemonial{ background:#F6B42C; }
  .testemonial h5{ font-weight: 600; color: #000;}
  .testemonial img {border:1px solid #fff;}
  .testemonial .card {  background: rgba(246, 180, 44, 0.8); transparent; padding:30px; border:2px solid #000; border-radius:10px; margin:15px 30px;  }
  .testemonial .card p{ font-size:12px; color:#000; }


  .counslist .carousel-inner  { margin: 0 auto; padding: 0 8%; }
  .testemonial .carousel-inner  { margin: 0 auto; padding: 0 8%; }

  .counslist .carousel-control-prev,
  .testemonial .carousel-control-prev { left:70px; }

  .counslist .carousel-control-next,
  .testemonial .carousel-control-next { right:70px; }


  @media (max-width: 768px) {
      .counslist .carousel-inner .carousel-item>div {
          display: none;
      }
      /*.testemonial .carousel-inner .carousel-item>div {
          display: none;
      }*/

      .counslist .carousel-inner .carousel-item>div:first-child,
      .testemonial.carousel-inner .carousel-item>div:first-child {
          display: block;
          /* opacity: 0.8; */
      }
      .counslist .carousel-control-prev,
      .testemonial .carousel-control-prev { left:5px; }

      .counslist .carousel-control-next,
      .testemonial .carousel-control-next { right:5px; }


  }

  .counslist .carousel-inner .carousel-item.active,
  .counslist .carousel-inner .carousel-item-start,
  .counslist .carousel-inner .carousel-item-next,
  .counslist .carousel-inner .carousel-item-prev,
  .testemonial .carousel-inner .carousel-item.active,
  .testemonial .carousel-inner .carousel-item-start,
  .testemonial .carousel-inner .carousel-item-next,
  .testemonial .carousel-inner .carousel-item-prev {
      display: flex;
      padding: 20px 0;

  }

  @media (min-width: 768px) {

     .counslist .carousel-inner .carousel-item-right.active,
     .counslist .carousel-inner .carousel-item-next,
     .counslist .carousel-item-next:not(.carousel-item-start)
      {
          transform: translateX(25%) !important;
      }

     .counslist .carousel-inner .carousel-item-left.active,
     .counslist .carousel-item-prev:not(.carousel-item-end),
     .counslist .active.carousel-item-start,
     .counslist .carousel-item-prev:not(.carousel-item-end) {
          transform: translateX(-25%) !important;
      }

     .counslist .carousel-item-next.carousel-item-start,
     .counslist .active.carousel-item-end {
          transform: translateX(0) !important;
      }

     .counslist .carousel-inner .carousel-item-prev,
     .counslist .carousel-item-prev:not(.carousel-item-end) {
          transform: translateX(-25%) !important;
      }



     .testemonial .carousel-inner .carousel-item-right.active,
     .testemonial .carousel-inner .carousel-item-next,
     .testemonial .carousel-item-next:not(.carousel-item-start)
      {
          transform: translateX(33.33%) !important;
      }

     .testemonial .carousel-inner .carousel-item-left.active,
     .testemonial .carousel-item-prev:not(.carousel-item-end),
     .testemonial .active.carousel-item-start,
     .testemonial .carousel-item-prev:not(.carousel-item-end) {
          transform: translateX(-33.33%) !important;
      }

     .testemonial .carousel-item-next.carousel-item-start,
     .testemonial .active.carousel-item-end {
          transform: translateX(0) !important;
      }

     .testemonial .carousel-inner .carousel-item-prev,
     .testemonial .carousel-item-prev:not(.carousel-item-end) {
          transform: translateX(-33.33%) !important;
      }
  }

  .proicon i { background:#f6b229; border-radius:50px; padding:5px; width:30px; height:30px; color:#fff; font-size:12px; display:inline-block; text-align:center; }

   /*.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
  }

  .nav-link .feather {
    margin-right: 4px;
    color: #727272;
  }*/

  .universities {}

  /* .universities .banners { background: url("{{ asset('frontend/images/student.jpg') }}") no-repeat center; background-size: cover;  } */
  .universities .banners .overlays{background: rgba(0, 0, 0, 0.7); padding:150px 0 30px 0; }
  .universities img.thumnail { position: relative;  left: -10px;  padding: 10px;  width: 100%; }
  .universities img.thumnail2 { position: absolute;right: 10px;   padding: 10px;  top: 25%; }
  /* .universities .thumnail3 {background: url(../img/scholorships.jpg) no-repeat top right; background-size: 80%;
   padding-top: 280px; padding-bottom:30px;} */
  .universities .thumnail4 {background: url(../img/background-computer.jpg) no-repeat top center;}
  .universities .thumnail5 {background: url(../img/newsletter.png) no-repeat top right;}

  .universities    .accordion-button:not(.collapsed) {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
    transition: background-color 0.3s ease;
  }
  .universities .accordion-button:not(.collapsed):focus {
    box-shadow: none;
  }
  .universities .overlay2 {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
      pointer-events: none; padding: 255px 30px 30px; margin: 0 0.75rem;}

  .universities .nav-pills .nav-link.active, .universities .nav-pills .show > .nav-link { color: #000;
    background-color: #f6b229; }
    .universities .nav-link {
    color: #000; border-bottom: 1px solid #ddd;
  }
  .universities .nav-link:focus, .universities .nav-link:hover {
    color: #f6b229;
  }

  .nav-tabs .nav-link.active { background-color: #f6b229;   }
  .nav-tabs .nav-link:hover {cursor:pointer;}
  .nav-tabs .nav-link {  color: #000 !important; font-weight: bold; background-color: #F6F6F6;  }
  .cardbx { background:white; padding:15px; border-radius:0px; box-shadow:0px 0px 20px rgba(0,0,0,0.2) }
  .cardbx h3{color:#232d42; font-size: 1.5rem;  font-weight: 400; margin-bottom: 0;}
  .cardbx h2{color:#232d42; font-size: 2rem;  font-weight: 500; margin-bottom: 0;}
  .cardbx .arrowicon{ font-size:30px; padding:22px 18px; text-align: center; position:absolute; color:#000; }
  .circular-progress { width: 90px; height: 90px;
    --size: 90px;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 3px;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
  }
  .circular-progress circle {
    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: round;
  }
  .circular-progress circle.bg {  stroke: #ddd;}
  .circular-progress circle.fg {
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    transition: stroke-dasharray 0.3s linear 0s;
    stroke: #f6b42c;
  }

  .profile-image {
    width: 100%; /* Makes the image fill the card width */
    height: 310px; /* Set a fixed height */
    object-fit: cover; /* Ensures the image covers the entire space without distortion */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .home-page-profile-image {
    width: 100%; /* Makes the image fill the card width */
    height: 270px; /* Set a fixed height */
    object-fit: cover; /* Ensures the image covers the entire space without distortion */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .profile-image-card {
    height: 100%; /* Ensures all cards have equal height */
  }

  .modal-padding-top {
    padding-top: 45px;
  }

  .modal-close-btn {
    top: -29px; right: 12px;
    width: 17px; height: 17px;
    background-color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
    border: none; z-index: 1050;
  }

  .edu-history-img {
    width: 100%;
  }

  @media (max-width: 768px) {
    .edu-history-img {
      width: 80%;
    }
  }

  .btn-green {
    background: #F6B42C !important;
    border: 1px solid #F6B42C !important;
    color: #fff;
  }

  .sign-button, .sign-button:hover {
    background-color: #F6B42C;
  }

  .sign-btn {
    background-color: #F6B42C;
  }
   @media(max-width: 768px) {
        .hide-on-mobile {
            display: none !important;
        }
        .undergraduate-sec, .graduate-sec {
            display: flex;
            justify-content: center;
        }

        .map-section, .thumnail4 {
            /* padding: 0px 25px !important; */
            padding-left: 25px !important;
            padding-right: 25px !important;
        }

        .program-sec {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .faq-sec {
            padding: 15px 10px !important;
        }
        .read-sec {
            padding: 15px 15px !important;
        }
        .custom-intake-heading {
            text-align: center;
            line-height: 1.2 !important;
            padding: 7px !important;
            font-size: 25px !important;
            background-size: 310px 337% !important;
        }
        .custom-admission-heading {
            text-align: center;
            line-height: 1.2 !important;
            padding: 7px !important;
            font-size: 25px !important;
        }
        .custom-faq-heading {
            text-align: center;
            line-height: 1.2 !important;
            padding: 7px !important;
            font-size: 23px !important;
            background-size: 345px !important;
        }
        .custom-top-heading {
            text-align: center;
            line-height: 1.2 !important;
            padding: 7px !important;
            font-size: 23px !important;
            background-size: 345px !important;
        }

        .c-img-sec {
            display: flex;
            justify-content: center;
        }
        .custom-cimage {
            height: 350px !important;
            width: 250px !important;
        }

        .admission-sec {
            padding: 15px;
        }
        .admission-sec .container {
            padding-bottom: 15px !important;
        }
        .admission-sec .as-custom-margin {
            margin-bottom: 7px !important;
        }
        .admission-sec .as-custom-margin-1 {
            padding: 20px 15px!important;
        }
   }
.web-banner{
  background-size: 100% 100%;
  height: 400px;
  width: 100vw;
  max-width: 100vw;
  margin-left: auto;
  margin-right: auto;
  background-color: #000;
  position: relative;
}
.mobile-banner{
  height: 300px;
  width: 100vw;
  max-width: 100vw;
  margin-left: auto;
  margin-right: auto;
  background-color: #000;
  position: relative;
}
.bg-1{
  background-color: #490969;
  }
  .bg-2{
  background-color: #FDB713;
  }
  .bg-3{
  background-color: #008290;
  }
  .bg-4{
  background-color: #163E6D;
  }
  .bg-5{
  background-color: #C3122F;
  }
  .bg-6{
  background-color: #CC4E0B;
  }
  .bg-7{
  background-color: #F26428;
  }
  .bg-8{
  background-color: #981E32;
  }
  .bg-9{
  background-color: #002D72;
  }
  .bg-10{
  background-color: #231F20;
  }
  .btn-1{
  color: #490969;
  border-color: #490969;
  }
  .btn-2{
  color: #FDB713;
  border-color: #FDB713;
  }
  .btn-3{
  color: #008290;
  border-color: #008290;
  }
  .btn-4{
  color: #163E6D;
  border-color: #163E6D;
  }
  .btn-5{
  color: #C3122F;
  border-color: #C3122F;
  }
  .btn-6{
  color: #CC4E0B;
  border-color: #CC4E0B;
  }
  .btn-7{
  color: #F26428;
  border-color: #F26428;
  }
  .btn-8{
  color: #981E32;
  border-color: #981E32;
  }
  .btn-9{
  color: #002D72;
  border-color: #002D72;
  }
  .btn-10{
  color: #231F20;
  border-color: #231F20;
  }

  .btn-1:hover{
  color: white;
  border-color: #490969;
  background-color: #490969;
  }
  .btn-2:hover{
  color: white;
  border-color: #FDB713;
  background-color: #FDB713;
  }
  .btn-3:hover{
  color: white;
  border-color: #008290;
  background-color: #008290;
  }
  .btn-4:hover{
  color: white;
  border-color: #163E6D;
  background-color: #163E6D;
  }
  .btn-5:hover{
  color: white;
  border-color: #C3122F;
  background-color: #C3122F;
  }
  .btn-6:hover{
  color: white;
  border-color: #CC4E0B;
  background-color: #CC4E0B;
  }
  .btn-7:hover{
  color: white;
  border-color: #F26428;
  background-color: #F26428;
  }
  .btn-8:hover{
  color: white;
  border-color: #981E32;
  background-color: #981E32;
  }
  .btn-9:hover{
  color: white;
  border-color: #002D72;
  background-color: #002D72;
  }
  .btn-10:hover{
  color: white;
  border-color: #231F20;
  background-color: #231F20;
  }