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

 @media only screen and (max-width: 768px) {
     .wideimg {
         width: 100%;
     }
 }

 .cardheader {
     font-size: 20px;
 }

 .cardsize {
     height: 290px;
 }

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

 }

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

 /*animation start*/
 #cd1:hover,
 #cd2:hover,
 #cd3:hover,
 #cd4:hover,
 #cd5:hover,
 #cd6: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;
 }

 .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%);
     }
 }

 .slideanimup1 {
     visibility: hidden;
 }

 .slideup1 {
     /* The name of the animation */
     animation-name: slideup1;
     -webkit-animation-name: slideup1;
     /* The duration of the animation */
     animation-duration: 1s;
     animation-delay: 0.5s;
     -webkit-animation-duration: 1.5s;
     animation-fill-mode: both;
     /* Make the element visible */
     visibility: visible;
 }

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

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

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

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

 .slideanimup2 {
     visibility: hidden;
 }

 .slideup2 {
     /* The name of the animation */
     animation-name: slideup2;
     -webkit-animation-name: slideup2;
     animation-fill-mode: both;
     /* The duration of the animation */
     animation-duration: 1s;
     animation-delay: 1s;
     -webkit-animation-duration: 1.5s;
     /* Make the element visible */
     visibility: visible;
 }

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

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

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

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

 .slideanimdown {
     visibility: hidden;
 }

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

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

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

 @-webkit-keyframes slidedown {
     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);
     }

     /* 50% {
                    transform: scale(0.5,0.5);
                } */
     100% {
         transform: scale(1, 1);
     }
 }

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

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

 .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%);
     }
 }

 /*animation ends*/
 @media only screen and (max-width: 1200px) {
     .vertical {
         visibility: hidden;
     }

     .blob2 {
         visibility: hidden;
     }

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

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

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

 @media (max-width:1080px) {
     .banner_header {
         font-size: 40px !important;
     }
     .cardsize{
         height: 344px;
     }
 }

 @media (max-width:800px) {
     .banner_header {
         font-size: 35px !important;
     }

     .header {
         font-size: 20px !important;
     }
     .cardsize{
        height: 290px;
    }

 }

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

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

     .header {
         font-size: 20px !important;
     }

     .heading_theme::after {
         top: -5px;
     }
 }

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

     }

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

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

     }

     .banner_header:last-child {
         font-size: 14px !important;
         margin-top: 0px;
     }
     .cardsize{
        height: 361px;
    }

 }