@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {    margin: 0;    padding: 0;    box-sizing: border-box;    font-family: 'Poppins', sans-serif;}.content{    width: 100vw;    min-height: 100vh;}.content .container{    padding-top: 30px;    padding-bottom: 20px;    box-shadow: 2px 15px 20px #1f1f1f10,-2px -8px 20px #1f1f1f1a;}
.container .rollers{    flex: 0 0 230px;}.container .start-roller{    left: 0;    top: 0;    background-image: linear-gradient(to right, white 30%, #ffffff00);}.container .start-roller,.container .end-roller{    height: 100%;    width: 40px;    position: absolute;    z-index: 1;}
.container .end-roller{    right: 0;    top: 0;    background-image: linear-gradient(to left, white 30%, rgba(255, 255, 255, 0));}
.container .rollers .wrapper{    position: relative;    width: 1400px;    height: 100px;    margin: 0 0 20px 0;    flex: 0 0 auto;}
.container .rollers .wrapper .items-container{    display: flex;    align-items: center;    position: absolute;    width: 100%;    height: 100%;    animation-duration: 30s;    animation-iteration-count: infinite;    animation-timing-function: linear;}
.container .rollers .wrapper .items-container.roll-LL{    animation-name: roll;}.container .rollers .wrapper .items-container.roll-RL{    animation-name: roll-reverse;    left: 100%;}.container .rollers .wrapper .items-container.reverse-roll-LL{    animation-name: roll-clockwise;    left: -100%;}
.container .rollers .wrapper .items-container.reverse-roll-RL{    animation-name: roll-reverse-clockwise;    left: 100%;}@keyframes roll {    0%{        left: 0%;    }    100%{        left: -100%;    }}@keyframes roll-reverse {    0%{        left: 100%;    }    100%{        left: 0%;    }}
@keyframes roll-clockwise {    0%{        left: -100%;    }    100%{        left: 0%;    }}@keyframes roll-reverse-clockwise {    0%{        left: 0%;    }    100%{        left: 100%;    }}.container .rollers .wrapper .items-container .item{    flex: 1 1 200px;    min-width: 0;    margin: 20px;}
.container .rollers .wrapper .items-container .item .company{    filter: grayscale(100%);    opacity: 0.2;    width: 100%;    object-fit: contain;}.container .rollers .wrapper .items-container .item .company:hover{    filter: grayscale(0%);    opacity: 1;    cursor: pointer;}.container img{    vertical-align: middle;}
@media (max-width: 575.5px) {    .content{        padding: 20px;    }    .content .container{        padding: 20px;    }    .h3{        font-size: calc(1.1rem + .6vw);    }    .fs-5 {        font-size: 0.9rem!important;    }    .container .rollers .wrapper .items-container .item .company{        opacity: 0.4;    }}
.h1{    color: black;  font-family: "arial"; font-size: 3em; margin: 10px 0 0 10px; overflow: hidden; width: 100%; animation: animtext 4s steps(80, end);   transition: all cubic-bezier(0.1, 0.7, 1.0, 0.1);}@keyframes animtext {  from {     width: 0;    transition: all 2s ease-in-out; } }.footer {	bottom: 0;    width: 100%;
background-color: black; color: white;}
.pad{	padding-right: 10%;	padding-left: 10%;}ul, h1, p, h2, h3{	margin-right: 2%;	margin-left: 2%;	padding-right: 2%;	padding-left: 2%;	}.div-1 {	background-color: #00ACE8;}.map-container-2{overflow:hidden;padding-bottom:56.25%;position:relative;height:0;}
.map-container-2 iframe{left:0;top:0;height:100%;width:100%;position:absolute;}
.card2 :hover {color: white;border-radius: 50px;border: double 5px transparent;}.card1 {  border-radius: 50px;  border: double 5px transparent;
    /*Set both inset and outset box shadow using CSS, separated by , */  box-shadow: inset -10px -10px 80px 1px rgba(0, 0, 0, 0.3),    10px 20px 50px 10px rgba(0, 0, 0, 0.5);}.card1 {  /* Animation attributes */  animation-name: turn-animation; /* any name what you give */  animation-duration: 5000ms; /* length of one animation cycle*/
    animation-iteration-count: infinite; /* repeats forever */  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */}/* Animation keyframes */@keyframes turn-animation {  0%,  100% {    /*Card position at start and end */    transform: rotate3d(0, 1, 0, 10deg);  }  /* Experiment with these numbers at 50% -> */  50% {    transform: rotate3d(0, 1, -0.2, 45deg);  }}
  .card1:hover {  opacity: 0.7;  background-image: linear-gradient(to bottom right, #074cb3 0%, black 100%);  color: white;}