@font-face {
font-family: "Helvetica Neue";
src: url('../fonts/HelveticaNeueLTStd-Lt_0.otf');
}
@font-face {
font-family: "Helvetica Neue";
font-weight: bold;
src: url('../fonts/HelveticaNeueLTStd-Bd_0.otf');
}
:root {
--primary: #122a88;
--primary_hover: #46afff;
--default_color:#637ac3;
}
body {
position: relative;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
font-size: 1rem;
font-family: "Helvetica Neue", sans-serif;
}
.h4,
h4,
.h2,
h2,
h3,
.h3 {
font-weight: bold;
}
.small {
font-size: 0.9rem;
}
.ci{
padding: 10px 60px;
display: flex;
justify-content: space-between;
margin-bottom: 60px;
}
.floatingBar{
color: #fff;
text-decoration: none;
transition: all 0.5s ease-in-out;
font-size: 1.2rem;
background-color: rgba(1,14,65,0.8);
color: #fff;
padding: 10px 20px;
display: block;
position: fixed;
bottom: 0;
width: 100%;
z-index: 99;
text-align: center;
}
.floatingBar:hover{
color: #fff;
transition: all 0.5s ease-in-out;
background-color: rgba(28, 66, 216, 0.8);
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
h2{
font-size: 3rem;
}
a {
color: var(--default_color);
text-decoration: none;
background-color: transparent;
}
a:hover {
color: var(--primary_hover);
text-decoration: none;
background-color: transparent;
}
p {
color: #707070;
}
a:hover p {
color: var(--primary_hover);
}
.whiteline{
background-color: #f0f0f0;
}
.footerCard{
margin-bottom: 20px;
/* border: 1px solid #93d1ff; */
padding: 10px;
border-radius: 10px;
background-color: rgb(95 127 255 / 20%);
}
.foottip{
justify-content: flex-end;
font-size: 0.8rem;
text-align: right;
}
.footerWrapper a:hover{
color: var(--primary_hover) !important;
}
.breadcrumb{
background-size: cover;
height: 300px;
background-position: 50% 50%;
}
.breadcrumbWrapper {
z-index: 1;
text-align: center;
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-top: 160px;
position: relative;
}
.breadcrumbTitle{
color: #fff;
font-size: 2.5rem;
}
.gap20{
gap: 20px;
}
.bigfont{
font-size: 1.2rem;
}
.text-white {
color: #fff !important;
}
.text-pramiry {
color: var(--primary);
}
.bg-pramiry {
background-color: var(--primary);
}
.grayFont {
color: #858585 !important;
}
.grayLightFont {
color: #cdcdcd;
}
.errorFont {
color: #c91f1f;
}
.successFont {
color: #00b124;
}
.greenFont {
color: #4bafb7;
}
.blueFont {
color: #0165b1 !important;
}
.borderBlue {
border-color: #0080df;
}
.orangeBgColor {
background-color: #ee8335;
}
.blackBgColor {
background-color: #4c4c4c;
}
.yellowBgColor {
background-color: #ffc400;
}
.blueBgColor {
background-color: #0165b1;
}
.redBgColor {
background-color: #eb1e26;
}
.whiteBgColor {
background-color: #fff;
}
.grayDeepBgColor {
background-color: #aaaaaa;
}
.greenBtn {
color: #fff;
background-color: #4bafb7;
}
.blueBtn {
color: #fff;
background-color: #36b4e5;
}
.deepGaryFont {
color: #707070 !important;
}
.garyFont {
color: #989898 !important;
}
.garyBtn {
color: #fff;
background-color: #989898;
}
.garyBgColor {
background-color: #fafafa;
}
.btn-light {
border: 0px;
}
.video-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 1;
}
.video-container video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: auto;
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
.mainKVWrap{
position: relative;
z-index: 10;
}
.mainKVWrap::after{
content: "";
background-color: rgba(0,0,0,0.8);
position: absolute;
width: 100%;
top: 0;
height: 100vh;
z-index: 1;
}
.home_banner_content_container{
grid-column-gap: 48px;
grid-row-gap: 48px;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1680px;
margin-left: auto;
margin-right: auto;
padding-top: 12px;
padding-bottom: 12px;
display: flex
;
}
.banner_container {
height: 100%;
padding-left: 48px;
padding-right: 48px;
position: absolute;
width: 100%;
top: 0;
z-index: 50;
}
.banner_container_in {
grid-column-gap: 48px;
grid-row-gap: 48px;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1680px;
margin-left: auto;
margin-right: auto;
padding-top: 12px;
padding-bottom: 12px;
display: flex
;
}
.pointiconWrap{
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 60px 0;
}
.pointicon{
font-size: 4rem;
width: 120px;
border-radius: 50%;
height: 120px;
position: relative;
border: 1px solid #fff;
margin-bottom: 10px;
}
.pointicon img, .pointicon i{
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%);
}
.awarddetail{
color: #fff;
font-size: 1.2rem;
}
.awarddetail li{
position: relative;
list-style: none;
margin-bottom: 20px;
}
.awarddetail li i{
position: absolute;
left: -30px;
top: 6px;
}
.bold{
font-weight: bold;
}
.contentContainer{
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 60px ;
}
.contentWrap{
align-items: center;
width: 100%;
max-width: 1680px;
margin-left: auto;
margin-right: auto;
}
.countWrap{
background-size: cover;
background-position: 50% 50%;
background-image: url("/eba/assets/images/countbg.png");
overflow: hidden;
position: relative;
background-color: #77c5ff;
padding:180px 60px;
}
.countbg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.smelogo img {
max-width: 200px;
}
.partnerWrap{
padding: 60px;
background-color: #fff;
}
.countdetail{
gap: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.home_banner_content_wrap{
display: flex;
position: absolute;
z-index: 100;
top: 0;
height: 100%;
width: 100%;
}
.banner_content {
flex-flow: column;
max-width: 100%;
display: flex;
justify-content: space-between;
position: relative;
z-index: 10;
min-height: 100vh;
padding: 190px 0px 0px;
max-width: 70%;
}
.home_banner_tagline_large {
display: flex;
letter-spacing: -7.92px;
text-transform: uppercase;
width: 100%;
padding-bottom: 13.2px;
font-size: 8rem;
font-weight: 800;
line-height: 130px;
}
.home_banner_des{
display: flex;
padding-bottom: 80px;
}
.btn {
border-radius: 50px;
}
.scrolldownWrap{
display: flex;
align-items: end;
z-index: 100;
}
.scrolldownText{
color:#fff;
writing-mode: vertical-rl;
text-orientation: mixed;
padding: 3px 6px 68px;
font-size: 13.2px;
line-height: 18px;
position: absolute;
inset: auto 0% 0% auto;
}
.scrolldownWrap::after {
z-index: 10;
content: "";
width: 1px;
height: 165px;
position: absolute;
bottom: 0px;
right: 50px;
margin: 0 auto;
overflow: hidden;
background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 50%);
background-position: 0 -60px;
background-size: 100% 200%;
animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@keyframes scrolldown {
0% {
background-position: 0 -165px;
}
75% {
background-position: 0 0;
}
100% {
background-position: 0 165px;
}
}
.cardWrap{
width: 100%;
display: flex;
flex-wrap: wrap;
-webkit-box-align: stretch !important;
-ms-flex-align: stretch !important;
align-items: stretch !important;
position: relative;
}
.leftCard, .rightCard{
width: 50%;
padding: 60px;
}
.leftCard{
background-color: #fff;
}
.rightCard{
background-color: var(--primary);
}
.eventItem{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: center;
align-items: center;
padding: 10px 20px 10px 0;
border-bottom: 1px solid #d4dcfe;
}
.event_date {
width: 60px;
height: 60px;
color: #fff;
background: #0d6efd;
text-align: center;
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
margin-right: 15px;
}
.cardImage{
padding: 40px;
position: relative;
background-image:url("/eba/assets/images/card.jpg") ;
background-size:cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.event_detail{
font-size: 1.2rem;
font-weight: bold;
color: var(--primary);
}
.countItem{
background-color: rgba(255, 255, 255, 0.3);
-webkit-backdrop-filter: brightness(105%) blur(6px);
backdrop-filter: brightness(105%) blur(6px);
border-radius: 18px;
flex-flow: row;
justify-content: flex-start;
align-items: center;
width: 23%;
padding: 36px;
display: flex;
}
.countItem .pointicon{
border: 1px solid var(--primary);
}
.count{
color: var(--primary);
display: flex;
flex-direction: column;
}
.footerWrapper{
padding: 60px ;
}
.timeline {
--col-gap: 2rem;
--row-gap: 2rem;
--line-w: 0.25rem;
display: grid;
grid-template-columns: var(--line-w) 1fr;
grid-auto-columns: max-content;
column-gap: var(--col-gap);
list-style: none;
width: min(60rem, 90%);
margin-inline: auto;
}
/* line */
.timeline::before {
content: "";
grid-column: 1;
grid-row: 1 / span 20;
background: rgb(225, 225, 225);
border-radius: calc(var(--line-w) / 2);
}
/* columns*/
/* row gaps */
.timeline li:not(:last-child) {
margin-bottom: var(--row-gap);
}
/* card */
.timeline li {
grid-column: 2;
--inlineP: 1.5rem;
margin-inline: var(--inlineP);
grid-row: span 2;
display: grid;
grid-template-rows: min-content min-content min-content;
}
/* date */
.timeline li .date {
--dateH: 3rem;
height: var(--dateH);
margin-inline: calc(var(--inlineP) * -1);
text-align: center;
background-color: var(--accent-color);
color: white;
font-size: 1.25rem;
font-weight: 700;
display: grid;
place-content: center;
position: relative;
border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}
/* date flap */
.timeline li .date::before {
content: "";
width: var(--inlineP);
aspect-ratio: 1;
background: var(--accent-color);
background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
position: absolute;
top: 100%;
clip-path: polygon(0 0, 100% 0, 0 100%);
right: 0;
}
/* circle */
.timeline li .date::after {
content: "";
position: absolute;
width: 2rem;
aspect-ratio: 1;
background: #fff;
border: 0.3rem solid var(--accent-color);
border-radius: 50%;
top: 50%;
transform: translate(50%, -50%);
right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}
/* title descr */
.timeline li .title,
.timeline li .descr {
background: #fff;
position: relative;
padding-inline: 1.5rem;
}
.timeline li .title {
overflow: hidden;
padding-block-start: 1.5rem;
padding-block-end: 1rem;
font-weight: 500;
font-size: 1.2rem;
}
.timeline li .descr {
padding-block-end: 1.5rem;
font-weight: 300;
}
/* shadows */
.timeline li .title::before,
.timeline li .descr::before {
content: "";
position: absolute;
width: 90%;
height: 0.5rem;
background: rgba(0, 0, 0, 0.5);
left: 50%;
border-radius: 50%;
filter: blur(4px);
transform: translate(-50%, 50%);
}
.timeline li .title::before {
bottom: calc(100% + 0.125rem);
}
.timeline li .descr::before {
z-index: -1;
bottom: 0.25rem;
}
.boxshadow{
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.gap10{
gap: 10px;
}
.underline{
text-decoration: underline;
}
.footerWrapper a{
color: #34e3ff;
}
.footerWrapper a:hover{
color: var(--primary_hover);
}
.tabNav{
gap:10px;
margin-bottom: 40px;
}
.tabNav .nav-link{
font-size: 1.8rem;
color: #4c4c4c;
background-color: #f0f0f0;
border-radius: 50px;
padding: 10px 30px;
}
.awardWrap{
display: flex;
flex-direction:row;
flex-wrap: wrap;
margin-bottom: 60px;
}
.awardItem{
border-radius: 10px;
outline: 1px solid #eeeeee;
width: 25%;
text-align: center;
padding: 20px;
}
.list-group-item {
border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.tabNav a.active{
color: #fff;
transition: all 0.5s ease-in-out;
background-color: var(--primary);
}
.tabNav a:hover.active{
color: #fff;
}
.tabNav a:hover{
transition: all 0.5s ease-in-out;
opacity: 0.5;
color: var(--primary);
}
@media (min-width: 40rem) {
.timeline {
grid-template-columns: 1fr var(--line-w) 1fr;
}
.timeline::before {
grid-column: 2;
}
.timeline li:nth-child(odd) {
grid-column: 1;
}
.timeline li:nth-child(even) {
grid-column: 3;
}
/* start second card */
.timeline li:nth-child(2) {
grid-row: 2/4;
}
.timeline li:nth-child(odd) .date::before {
clip-path: polygon(0 0, 100% 0, 100% 100%);
left: 0;
}
.timeline li:nth-child(odd) .date::after {
transform: translate(-50%, -50%);
left: calc(100% + var(--col-gap) + var(--line-w) / 2);
}
.timeline li:nth-child(odd) .date {
border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
}
}
.credits {
margin-top: 1rem;
text-align: right;
}
.credits a {
color: var(--color);
}
.hide{
display: none !important;
}
.show{
display: block;
}
.btn-light:hover{
color: #fff;
background-color: var(--primary_hover);
}
@keyframes zoomin {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.gallery-item {
position: relative;
display: block;
min-height: 248px;
overflow: hidden;
max-height: 248px;
transition: all 0.5s ease-in-out;
}
.gallery-item:hover{
transform: scale(1.05);
transition: all 0.5s ease-in-out;
}
.gallery-item img {
border-radius: 10px;
}
@media screen and (min-width: 1920px) {
.home_banner_tagline_large {
letter-spacing: -10.8px;
padding-bottom: 18px;
font-size: 150px;
line-height: 164px;
}
}
@media screen and (min-width: 1440px) {
.home_banner_content_container{
padding-left: 60px;
padding-right: 60px;
}
}
@media screen and (max-width: 1280px) {
.home_banner_tagline_large{
font-size: 5.5rem;
line-height: 92px;
}
.countItem{
width: 48%;
}
}
@media screen and (max-width: 991px) {
.breadcrumbTitle {
font-size: 2rem;
}
.contentContainer {
padding: 30px;
}
.banner_container,.footerWrapper,.partnerWrap {
padding-left: 30px;
padding-right: 30px;
}
.leftCard, .rightCard{
width: 100%;
padding: 60px 30px;
}
.banner_content {
max-width: 100%;
}
.home_banner_tagline_large {
letter-spacing: 0px;
padding-bottom: 20px;
font-size: 4.5rem;
line-height: 76px;
}
.home_banner_des {
max-width: 300px;
}
}
@media screen and (max-width: 768px) {
.foottip{
justify-content: flex-start;
font-size: 0.8rem;
}
.ci {
flex-direction: column;
}
.countItem{
width: 100%;
}
.home_banner_tagline_large {
font-size: 3.5rem;
line-height: 60px;
}
.countWrap{
padding:60px 30px;
}
}