html,
 body {
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
     scroll-behavior: smooth;
     box-sizing: border-box;
     position: relative;
 }

 .cardheader {
     font-size: 20px;
 }

 .btn-link {
     color: #FF0000 !important;
     font-weight: bold;
     border-color: white !important;
 }

 .btn-link:focus {
     outline: none;
     box-shadow: none;
 }

 .card {
     box-shadow: 0px 0px 6px #00000029;
     flex: 0 0 auto;
 }

 #more {
     display: none;
 }

 .cardsize {
     height: 290px;
 }

 .heading_theme-mark:after {
     background-image: url(Libraries/images/Arrow.svg);
     display: inline-block;
     width: 30px;
     height: 30px;
     content: "";
     background-repeat: no-repeat;
     position: relative;
     top: -15px;
     left: -5px;
     background-size: cover;
 }

 .sbc_overlay {
     height: 100%;
     width: 100%;
     position: absolute;
     background-color: #0000006B;
     opacity: 1;
 }

 section,
 .sbc_banner {
     position: relative;
     z-index: 1;
 }

 @media only screen and (max-width: 600px) {
     section {
         padding: 12px !important;
     }

     .banner_header {
         font-size: 24px !important;
         padding: 0px !important;
         margin: 0px !important;
     }

     .subheader {
         font-size: 20px;
     }

     .heading_theme:after,
     .heading_theme-mark:after {
         display: none;
     }

     .heading_theme-top:after {
         height: 30px !important;
         width: 30px !important;
         top: -5px;
         left: -12px;
     }
 }

 @media only screen and (max-width: 480px) {
     .carousel-caption {
         top: 5%;
         left: 30px;
     }

     .heading_theme-top:after {
         height: 30px !important;
         width: 30px !important;
         top: -5px;
         left: -12px;
     }

     section {
         padding: 12px;
     }

     .banner_header {
         font-size: 24px;
     }

     .header {
         font-size: 20px;
     }

     .heading_theme:after {
         width: 20px;
         height: 20px;
         top: -10px;
     }
 }

 @media (max-width:425px) {
     .banner_header {
         font-size: 18px !important;
         margin-top: 0px;
     }

     .banner_header:last-child {
         font-size: 18px !important;
         margin-top: 0px;
     }
 }

  /* animation starts */
  .slideanimbanner {
    visibility: hidden;
}

.slidebanner {
    /* The name of the animation */
    animation-name: slidebanner;
    -webkit-animation-name: slidebanner;
    /* The duration of the animation */
    animation-duration: 1s;
    -webkit-animation-duration: 1.5s;
    /* Make the element visible */
    visibility: visible;
}

@keyframes slidebanner {
    0% {
        opacity: 0;
        transform: translateY(-70%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@-webkit-keyframes slidebanner {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

.slideanimbasic {
    visibility: hidden;
}

.slidebasic {
    /* The name of the animation */
    animation-name: slidebasic;
    -webkit-animation-name: slidebasic;
    /* The duration of the animation */
    animation-duration: 1s;
    -webkit-animation-duration: 1.5s;
    /* Make the element visible */
    visibility: visible;
}

@keyframes slidebasic {
    0% {
        transform: scale(0.2, 0.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes slidebasic {
    0% {
        opacity: 0;
        -webkit-transform: translateZ(70%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0%);
    }
}

.slideanimup {
    visibility: hidden;
}

.slideup {
    /* The name of the animation */
    animation-name: slideup;
    -webkit-animation-name: slideup;
    /* The duration of the animation */
    animation-duration: 1s;
    -webkit-animation-duration: 1.5s;
    /* Make the element visible */
    visibility: visible;
}

@keyframes slideup {
    0% {
        opacity: 0;
        transform: translateY(-70%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@-webkit-keyframes slideup {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
    #card1:hover,
    #card2:hover,
    #card3:hover,
    #card4:hover,
    #card5:hover {
        transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.07, 1.07);
        -moz-transform: scale(1.1, 1.1);
        transition: all .5s ease;
    }