@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

:root{
  --primary1: 218,33,40; /* #da2128 */
  --color_gray: 245,245,245;  /* F5F5F5*/
  --color_black: 0,0,0;
  --color_white: 255,255,255;
  --baseFont: 'Montserrat', sans-serif;
  --imgPrimary1: invert(17%) sepia(81%) saturate(4335%) hue-rotate(349deg) brightness(90%) contrast(90%);
  --imgWhite: invert(100%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(103%) contrast(102%);
  --imgBlack: invert(0%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(93%) contrast(103%);
  --padding: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
    scroll-behavior: auto !important;
}

.clr-primary1{color: rgb(var(--primary1)) !important;}

body {margin: 0; padding: 0; background-color1: rgb(var(--color_black)); font-size: 16px;}
body, table, input, textarea, select, html {font-family: var(--baseFont); font-weight: 400; color: rgb(var(--color_black));}
.text-white{color: rgb(var(--color_white)) !important;}

header{background-color1: rgb(var(--color_black));}
#logo #logo-black img{filter1: brightness(0) invert(1);}

/* typography */
h2.title{font-size: clamp(1.875rem, 1.5rem + 1.875vw, 3.75rem); font-weight: 800; position: relative; text-transform: uppercase; padding-left: clamp(1.875rem, 1.5rem + 1.875vw, 3.75rem); margin: 0 0 clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem);}
h2.title:before{content: ""; background-color: rgb(var(--primary1)); width: 10px; height: 95%; position: absolute; left: 0; top: 5%;}
.sub-text{color1: rgb(var(--color_white));  font-size: clamp(1.125rem, 0.95rem + 0.875vw, 2rem); font-weight: 600; margin: 0 0 clamp(1.125rem, 0.975rem + 0.75vw, 1.875rem); line-height: normal;}
a{color1: rgb(var(--color_white));}


#video-outer1{ view-timeline-name: --revealing-image; view-timeline-axis: block; animation: linear reveal both; animation-timeline: --revealing-image; animation-range: entry 25% cover 50%; height: 100vh;}
.overflow-hidden {overflow: hidden !important;}
.ratio-16x9 {--bs-aspect-ratio: 56.25%;}
.ratio {position: relative; width: 100%;}

#banner-video{width: 100%;}

.padding{ padding: var(--padding) 0;}
.pl{padding-left: clamp(1.875rem, 1.5rem + 1.875vw, 3.75rem);}

#digital-block ul{ padding-left: 1rem;}
#digital-block ul strong{font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);}
#digital-block ul li{margin-bottom: 10px;}
#digital-block ul li:last-child{margin-bottom:0;}

.bullet-style{ padding-left: 1rem; margin-bottom: 3rem;}
.bullet-style li{color1: rgb(var(--color_gray)); font-weight: 300; margin-bottom: 10px; }
.bullet-style li:last-child{margin-bottom:0;}

.bullet-style.list-unstyled{padding-left: 0;}

.text-gray{color: rgb(var(--color_gray));}

#digital-block .card{height: 350px; border: 1px solid #d3d3d3;justify-content: end; position: relative; background-color: transparent; margin-bottom: 30px; overflow: hidden;}
#digital-block .card .card-body{ padding: 30px; position: relative; height: 100%;}
#digital-block .card .card-body .card-text{margin: 0; margin-top: 220px; font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem); font-weight: 700; color1: rgb(var(--color_white)); transition: all .3s linear;}
#digital-block .card .card-hover{transform: translateY(100%); position: absolute; left: 0; top: 80px; padding: 30px; transition: all .3s linear; opacity: 0; visibility: hidden;}
#digital-block .card .card-hover p{position: relative; top: 15px; font-weight: 300;}
#digital-block .card:hover .card-body .card-text{margin-top: 0; color: rgb(var(--color_white)); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);}
#digital-block .card:hover .card-hover{transform: translateY(0); opacity: 1; visibility: visible;}
#digital-block .card:hover{background-color:rgb(var(--primary1));}
#digital-block .card .card-body::before1{content: ""; background-image: url('../images/white-shape.png'); background-repeat: no-repeat; background-position: 0 0; width: 48px; height: 48px; position: absolute; right: 120px; top:120px; opacity: 0; visibility: hidden; transition: all .3s linear;}
#digital-block .card:hover .card-body::before{opacity: 1; visibility: visible; right: 30px; top: 30px; }
#digital-block .card:hover{border-color:rgb(var(--primary1));}
#digital-block .card .card-body ul{padding-left: 1.5rem; color: rgb(var(--color_white));}
#digital-block .card:hover .card-body .card-hover p{color: rgb(var(--color_white));}



table.custom {    border1: 1px solid rgba(255, 255, 255, 0.15);}
table.custom tr th, table.custom tr td {background-color: transparent; font-weight: 300; color1: rgb(var(--color_gray)); border-color1: rgba(255,255,255,0.15); vertical-align: top; padding: 0.75rem;}
table.custom tr th {font-weight: 600;}

.statistics{display: flex; flex-wrap: wrap;}
.statistics .block{margin-bottom: 30px;}
.statistics .block .number{font-size: 375%; position: relative; color: #da2128; font-weight: 800; line-height: 1.2;}
.statistics .block .number::after{content: "+"; display: inline-block; margin-left: 5px;}
.statistics .block .number.noplus::after{display: none;}
.statistics .block .text{color: #7d7d7d; font-size:112.5%; }

footer,.bg-gray{background-color1: rgb(var(--color_black));}
footer h2.title{color1: rgb(var(--color_white));}

footer ul li a:before{background-color1: rgb(var(--color_white));}
/* #social-links a i{filter: brightness(0) invert(1); opacity: 0.6; transition: opacity .3s linear;}
#social-links a:hover i{opacity: 0.8;}
#social-links:after{display: none;} 
#footer-links{border-color: #2e2c2c;}
.copyright .copy-text{color: #7C7C7C;}
.copyright .copy-text a{color: #7C7C7C; text-decoration: none;}
.copyright .copy-text a:hover{color: rgb(var(--primary1));}*/

.btn-cust.btn-spl {position: absolute; right: 20px; top: 35px;}
.btn-cust.btn-spl .icon{background-color: #f6f6f6; margin: 0;}
.btn-cust.btn-spl .icon .arrow{filter: invert(1);}