@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&display=swap');


:root {
    --primary1: 3, 100, 57;  /*  #036439; */
    --primary2: 9, 61, 119; /* #093D77; */
    --primary3: 33,33,33; /* #212121 */

    --primary4: 251, 146, 60; /* #FB923C */
    --primary5: 64, 155, 194; /* #409BC2 */
    --primary6: 139, 194, 64; /* #8BC240 */


    --primary7: 245, 236, 47; /* #F5EC2F */
    --primary8: 217, 217, 217; /* #D9D9D9 */

    --color_base: 83,83,83; /* #535353 */
    --color_black: 0, 0, 0;
    --color_white: 255, 255, 255;
    --color_gray: 240, 239, 237; /* #F0EFED */
    --baseFont: 'Karla', sans-serif;

    --imgPimary1: invert(29%) sepia(31%) saturate(1967%) hue-rotate(114deg) brightness(87%) contrast(98%);
    --imgPimary2: invert(13%) sepia(42%) saturate(4232%) hue-rotate(200deg) brightness(104%) contrast(93%);
    --imgPimary3: invert(9%) sepia(32%) saturate(0%) hue-rotate(243deg) brightness(97%) contrast(91%);

    --imgPimary4: invert(72%) sepia(19%) saturate(2889%) hue-rotate(330deg) brightness(99%) contrast(99%);
    --imgPimary5: invert(73%) sepia(44%) saturate(3496%) hue-rotate(167deg) brightness(83%) contrast(79%);
    --imgPimary6: invert(66%) sepia(72%) saturate(374%) hue-rotate(43deg) brightness(93%) contrast(89%);

    --imgPimary7: invert(81%) sepia(75%) saturate(435%) hue-rotate(3deg) brightness(96%) contrast(109%);
    --imgPimary8: invert(70%) sepia(78%) saturate(0%) hue-rotate(214deg) brightness(103%) contrast(103%);

    --imgBase: invert(0%) sepia(53%) saturate(1984%) hue-rotate(337deg) brightness(106%) contrast(76%);
    --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);
    --padding-sm: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem);

    --radius12 : 12px;

}

html {
    scroll-behavior: auto !important;
}

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

.clr-primary1{
    color: rgb(var(--primary1)) !important;
}
.clr-primary2{
    color: rgb(var(--primary2)) !important;
}
.clr-primary3{
    color: rgb(var(--primary3)) !important;
}
.clr-primary4{
    color: rgb(var(--primary4)) !important;
}
.clr-primary5{
    color: rgb(var(--primary5)) !important;
}
.clr-primary6{
    color: rgb(var(--primary6)) !important;
}
.clr-primary7{
    color: rgb(var(--primary7)) !important;
}

.bg-primary1{
    background-color: rgb(var(--primary1));
}
.bg-primary2{
    background-color: rgb(var(--primary2));
}
.bg-primary3{
    background-color: rgb(var(--primary3));
}
.bg-primary4{
    background-color: rgb(var(--primary4));
}
.bg-primary5{
    background-color: rgb(var(--primary5));
}

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


body {
    font-family: var(--baseFont);
    color: rgb(var(--color_base));
}

.sprite{
    background-image: url('../images/sprite.png');
    display: inline-block;
    vertical-align: middle;
}

a,
a:hover,
a:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-decoration: none;
}

button:focus {
    outline: none;
}

.content p {
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    margin-bottom: clamp(0.9375rem, 0.825rem + 0.5625vw, 1.5rem);
    line-height: 1.3;
    color: rgb(var(--color_base));
}

.content p span{
    color: rgb(var(--primary3));


}

.content p a{
    color: rgb(var(--primary3));
    text-decoration: underline;
}

.content p:last-child {
    margin-bottom: 0;
}

.content h3{
    font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
    font-weight: 700;
    margin: 40px 0 24px;
    color: rgb(var(--primary2));
}

.content ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.content ul li{
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem);
    line-height: normal;
}
.content ul li:last-child{
    margin-bottom: 0;
}

.content ul li::before{
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 8px;
    display: block;
    border:2px solid rgb(var(--primary7));
}


.pic{
    overflow: hidden;

}

.radius-12{border-radius: var(--radius12);}

.padding {
    padding: var(--padding) 0;
}

.padding-sm{
    padding: var(--padding-sm) 0;
}

h2.title{
    font-size: clamp(1.375rem, 1.0875rem + 1.4375vw, 2.8125rem);
    margin-bottom: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: rgb(var(--primary2));
}

h2.title-sm{
    font-size: clamp(1.25rem, 1.0625rem + 0.9375vw, 2rem);

}


h2.title span{
    font-size: 1rem;
    color: rgb(var(--primary1));
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}

hr{
 opacity: 1;
}

h4{
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    margin: 0 0 8px;
    color: rgb(var(--color_black));
}

h4.bold{
    font-weight: 700;
}
.btn-custom{
    text-transform: uppercase;
    padding: 16px 24px;
    border-radius: 6px;
    line-height: normal;
    position: relative;
    border: 1px solid  rgb(var(--primary1));
    font-weight: 700;
    color: rgb(var(--primary1));
}
.btn-custom:hover, .btn-custom:focus,.btn-custom:active,:not(.btn-check)+.btn:active{
    background-color: rgb(var(--primary1));
    color: rgb(var(--color_white));
    border-color: rgb(var(--primary1));
}

.btn-orange{
    border-color: rgb(var(--primary4));
    color: rgb(var(--primary4));
    padding: 14px;
}
.btn-orange:hover,.btn-orange:focus{
    background-color: rgb(var(--primary4));
    border-color: rgb(var(--primary4));
}

.btn-custom.fill{
    background-color: rgb(var(--primary1));
    color: rgb(var(--color_white));
}
.btn-custom.fill:hover,.btn-custom.fill:focus,.btn-custom.fill:active{
    border-color: rgb(var(--primary1));
    background-color: rgb(var(--primary1));
    color: rgb(var(--color_white));
}

.btn-custom.disable{background-color: #F5F5F5; border: #F5F5F5; color: #BEBEBE; cursor: inherit;}
.btn-custom.disable:focus,.btn-custom.disable:active{background-color: #F5F5F5; border: #F5F5F5; color: #BEBEBE; cursor: inherit;}


#wrapper{max-width: 1920px; margin: 0 auto; overflow: hidden;}

/* header */
.header{
    z-index: 99;
    background-color: rgb(var(--color_white));
    max-width: 1920px; margin: 0 auto;
    box-shadow: 0px 4px 12px 0px rgba(var(--color_black), 0.15);
}

.header .navbar-nav .nav-item .nav-link{
    text-transform: uppercase;
    padding: 50px 10px;
    white-space: nowrap;
    font-weight: 700;
    line-height: normal;
    color: rgb(var(--primary3));
    font-size: 15px;
}

.header .dropdown:hover > .dropdown-menu {
    display: block;
}

.header .dropdown-menu .dropdown-item:focus, .header .dropdown-menu .dropdown-item:hover{
    color: rgb(var(--primary1));
    background-color: transparent;
}

.header .navbar-nav .nav-item .nav-link:hover{
    color: rgb(var(--primary1));
}

.header .navbar-nav .nav-item ul li a{
    text-transform: uppercase;
    padding: 0.5rem 1rem;
}

.header .top-right{
    align-items: center;
}

.header .top-right a.ar-link{
    color: rgb(var(--primary3));
    font-weight: 700;
    margin-right: 30px;
}
.header .top-right a.ar-link:hover, .header .top-right a.ar-link:focus{
    color: rgb(var(--primary1));
}

.header .top-right a{margin-right: 1rem; }
.header .top-right a:last-child { margin-right: 0;}

.fs-14{font-size: 14px;}

/* banner */
#banner .banner-slider{z-index: inherit; position: relative;}
#banner .container{position: absolute; width: 70%; z-index: 3; margin: 0 auto; left: 0; right: 0; left: 0; height: 100%; display: flex; top: 50%; transform: translateY(-50%); justify-content: center; flex-direction: column;}
#banner {
    width: 100%;
    position: relative;
    overflow: hidden;
}
#banner .item {
    overflow: hidden;
}
#banner .item .pic,
#banner .item .video-wrap {
    position: relative;
}
#banner,
#banner .item,
#banner .item .pic,
#banner .item .video-wrap {
    height: 100vh;
    max-height: 1080px;
}
#banner .item .pic img {
    height: 100%;
    object-fit: cover;
}
#banner .item .pic:after,
#banner .item .video-wrap::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color_black), 0.20);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: block;
    z-index: 2;
}
#banner .banner-text{
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: calc(50% + 50px);
    transform: translateY(-50%);
    z-index: 3;
    margin: 0 auto;
    text-align: center;
}

#banner .item.has-video .video-icon {
    margin: 0 auto 15px;
    width: 150px;
    height: 150px;
}
#banner .item.has-video .video-icon.active{opacity: 0; visibility: hidden;}
#banner .banner-text .banner-title{font-size: clamp(2.8125rem, 2.0156rem + 3.9844vw, 4rem); line-height: 1.1; color: rgb(var(--color_white)); font-weight: 700; margin-bottom: 18px;}
#banner .banner-text p{ font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1rem); font-weight: 700; color: rgb(var(--color_white)); margin-bottom: 0;}
#banner-video {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* about */
.about {}
.about::before {
    content: "";
    background-image: url('../images/pattern.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 441px;
    height: 254px;
    z-index: 0;
}
.about .title {z-index: 2;}

.pic{border-radius: var(--radius12); position: relative;}
.pic img{border-radius: var(--radius12); transition: 0.4s;}
.pic:hover img {transform: scale(1.08);}

/* middle */
.middle{}
.middle::after{content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-color: rgb(var(--primary1));
}


/* challenge */
.challenge::after {
    content: "";
    background-image: url('../images/pattern02.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 453px;
    height: 417px;
    z-index: 0;
}
.challenge .card-outer{ padding-top: 50px; position: relative; transition: all .3s linear;}
.challenge .card{ border-radius: var(--radius12); border: none; height: 430px; box-shadow: 0px 0px 20px 0px rgb(var(--primary1)); transition: all .3s linear; position: relative; padding: var(--padding-sm);}
.challenge .card-outer:hover{padding-top: 0;}
.challenge .card-outer:hover .card{height: 480px;}
.challenge .card h5{margin: 0; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 700;}
.challenge .card h3{margin: 0 0 20px; font-size: clamp(1.25rem, 0.9375rem + 1.5625vw, 2.5rem); font-weight: 700;}
.challenge .card .card-body .btn{display: none; color: rgb(var(--color_white)); text-align: left; padding: 0; text-transform: uppercase; font-weight: 700;}
.challenge .card:hover .card-body .btn{display: block; border: none;}
.challenge .card:hover .card-body .btn:hover{background-color: transparent;}
.challenge .challenge-items .card h5{color: rgb(var(--primary3)); }
.challenge .challenge-items .card h3{color: rgb(var(--primary4)); }
.challenge .challenge-items [class^="col-"]:nth-child(1):hover .card{background-color: rgb(var(--primary4));}
.challenge .challenge-items .card:hover h5,
.challenge .challenge-items .card:hover h3{color: rgb(var(--color_white));}
.challenge .challenge-items .card:hover p{color: rgb(var(--color_white));}
.challenge .challenge-items [class^="col-"]:nth-child(2):hover .card{background-color: rgb(var(--primary5));}
.challenge .challenge-items [class^="col-"]:nth-child(3):hover .card{background-color: rgb(var(--primary6));}
.challenge .card .number{position: absolute; right: 15px; bottom: -10px; font-size: clamp(3.75rem, 2.6875rem + 5.3125vw, 8rem); line-height: 1; color: #E8EEEC; font-weight: 700; transition: all .3s linear;}
.challenge .card:hover .number{color: rgba(232,238,236,0.1);}

/* participate */
.participate .step-wrap .step-item{padding-bottom: 24px; position: relative; display: flex; flex-direction: column; height: 100%;}
.participate .step-wrap .step-item::after{content: ""; width: 100%; height: 2px; background-color: rgb(var(--primary7)); position: absolute; left: 0; right: 0; bottom: 0;}
.participate .step-wrap .step-item::before{content: ""; width: 0; height: 2px; background-color: rgb(var(--primary6)); position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; transition: all .3s linear;}
.participate .step-wrap .step-item:hover::before{width: 100%;}
.participate .step-wrap .step-item .icon{background-image: url('../images/check-icon.png'); background-repeat: no-repeat; background-position: 0 0; width: 40px; height: 40px; background-size: cover;
    margin-bottom: 12px;
}
.participate .step-wrap .step-item .step-number{font-weight: 700; margin-bottom: 12px; line-height: normal;}
.participate .step-wrap .step-item .step-text{font-weight: 500; line-height: 1.1; color: rgb(var(--primary3)); font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);}

/* toolkit */
.toolkit{position: relative;}
.toolkit::before {
    content: "";
    background-image: url('../images/pattern03.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 442px;
    height: 255px;
    z-index: 0;
}
.toolkit::after{
    content: "";
    background-color: rgb(var(--primary2));
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;

}
.toolkit-item{background-color: rgb(var(--color_white)); border-radius: 8px; border: 1px solid #EFEFDF; margin-bottom: 12px; padding: 24px 34px}
.toolkit-item:last-child{margin-bottom: 0;}

.toolkit-wrap .toolkit-item:nth-child(1) .number{
    background-color:rgba(var(--primary4),0.1);
    color: rgb(var(--primary4));
}
.toolkit-wrap .toolkit-item:nth-child(2) .number{
    background-color:rgba(var(--primary5),0.1);
    color: rgb(var(--primary5));
}
.toolkit-wrap .toolkit-item:nth-child(3) .number{
    background-color:rgba(var(--primary6),0.1);
    color: rgb(var(--primary6));
}

.toolkit-item .number{
    border-radius: 45px;
    text-align: center;
    font-size: clamp(1.5rem, 1.125rem + 1.875vw, 3rem);
    font-weight: 700;
    width: 80px;
    height: 80px;
    line-height: 80px;
}

.toolkit-item .text h6{
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.64px;
line-height: normal;
}

.toolkit-item .text h3{
font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
font-weight: 500;
letter-spacing: -0.48px;
line-height: normal;
color: rgb(var(--primary3));
margin-bottom: 0;
}
.toolkit-item .btn{
    color: rgb(var(--primary1));
    font-weight: 700;
    text-transform: uppercase;
    padding: 0;
    border: none;
}
.toolkit-item .btn:hover,.toolkit-item .btn:focus{
    outline: none;
}



/* tide-turners */
.tide-turners{position: relative;}
.tide-turners p{color: #87A1BF;}
.tide-turners h4{color: #87A1BF; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 700;}
.tide-turners::before {
    content: "";
    background-image: url('../images/pattern02.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 453px;
    height: 417px;
    z-index: 0;
}
.tide-turners .btn{
    color: rgb(var(--color_white));
    font-weight: 700;
    text-transform: uppercase;
    padding: 0;
    border: none;
    text-underline-offset: 5px;
}
.tide-turners .btn:hover{
text-decoration: underline;
}

.tide-turners-list .card{border-radius: var(--radius12); border: none;}
.tide-turners-list .card .card-title{display: flex; border-radius: var(--radius12) var(--radius12) 0 0; font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem); font-weight: 700; justify-content: space-between; padding: 24px; color: rgb(var(--color_white)); line-height: normal;}
.tide-turners-list .card .card-body{padding: 24px;}
.tide-turners-list .card .card-body .item{padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #E8E8E8; display: flex; align-items: center;
    width: 100%;
}
.tide-turners-list .card .card-body .item:last-child{margin-bottom: 0; padding-bottom: 0; border: none;}
.tide-turners-list .card .card-body .item .image{margin-right: 14px; border-radius: 50%; position: relative;}
.tide-turners-list .card .card-body .item .image img{border-radius: 50%;}
.tide-turners-list .card .card-body .item .image .badge{position: absolute; left: 0; top: -10px; border-radius: 50px;
    font-size: clamp(0.75rem, 0.6875rem + 0.3125vw, 1rem); font-weight: 700; padding: 4px 8px;
}
.tide-turners-list .card .card-body .item .info h4,.tide-turners-list .card .card-body .item .score h4{font-size: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem); font-weight: 700; margin-bottom: 5px; color: rgb(var(--primary3)); line-height: normal;}
.tide-turners-list .card .card-body .item .info h6,.tide-turners-list .card .card-body .item .score h6{font-size: clamp(0.6875rem, 0.6406rem + 0.2344vw, 0.875rem); color: rgb(var(--color_base)); margin-bottom: 0; line-height: normal;}
.tide-turners-list .card .card-body .item .score{border-left: 1px solid #E8E8E8; margin-left: 14px; padding-left: 24px;}

.tide-turners-list .card.card-1 .card-title{background-color: rgb(var(--primary4));}
.tide-turners-list .card.card-2 .card-title{background-color: rgb(var(--primary5));}
.tide-turners-list .card.card-3 .card-title{background-color: rgb(var(--primary6));}

.tide-turners-list .card.card-1 .card-body .item .image .badge {border: 1px solid rgb(var(--primary4)); color: rgb(var(--primary4)); background-color: #FFF7ED;}
.tide-turners-list .card.card-1 .card-body .item .image .badge-fill{background-color: rgb(var(--primary4)); color: rgb(var(--color_white));}
.tide-turners-list .card.card-2 .card-body .item .image .badge {border: 1px solid rgb(var(--primary5)); color: rgb(var(--primary5)); background-color: #F0F9FF;}
.tide-turners-list .card.card-2 .card-body .item .image .badge-fill{background-color: rgb(var(--primary5)); color: rgb(var(--color_white));}
.tide-turners-list .card.card-3 .card-body .item .image .badge {border: 1px solid rgb(var(--primary6)); color: rgb(var(--primary6)); background-color: #F7FEE7;}
.tide-turners-list .card.card-3 .card-body .item .image .badge-fill{background-color: rgb(var(--primary6)); color: rgb(var(--color_white));}




/* testimonials */
.testimonials{position: relative; }

.owl-carousel.sttye01 .owl-nav{position: absolute; right: 0; top: 0; top: -80px;}
.owl-carousel.sttye01 .owl-nav i{width: 32px; height: 32px; display: block; background-image: url('../images/arrow.png'); background-repeat: no-repeat;
    background-position: 0 0; background-size: cover;
}
.owl-carousel.sttye01 .owl-nav .arrow-left{transform: rotate(180deg);}

.testimonial-slider .owl-stage{display: flex;}

.testimonials .owl-carousel>div {overflow: visible;}
.testimonial-slider .item{height: 100%;}
.testimonial-slider .card {padding: 34px; border: none; height: 100%;}
.testimonial-slider .card .card-text {font-size: clamp(0.9375rem, 0.8906rem + 0.2344vw, 1.125rem); color: rgb(var(--color_base));}
.testimonial-slider .card .card-bottom{display: flex; justify-content: space-between; padding-top: 24px; margin-top: 24px; border-top: 1px solid #F5F5F5; margin-top: auto; }
.testimonial-slider .card .card-bottom .image{border-radius: 50%; width: 50px; height: 50px;}
.testimonial-slider .card .card-bottom .image img{border-radius: 50%;}
.testimonial-slider .card .card-bottom h4{font-size: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem); font-weight: 700; margin-bottom: 5px; color: rgb(var(--primary3)); line-height: normal;}
.testimonial-slider .card .card-bottom h6{font-size: clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem); color: rgb(var(--color_base)); margin-bottom: 0; line-height: normal;}
#counter{position: absolute; right: 100px; top: -75px;}


.join-challenge-block{position: relative;}
.join-challenge-block::before{
    content: "";
    display: block;
    background-image: url('../images/pattern05.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    left: 0;
    width: 452px;
    height: 416px;
    top:calc(50% - 416px);
}
.join-challenge-block::after{
    content: "";
    position: absolute;
    height: 50%;
    bottom: 0;
    background-color: rgb(var(--color_white));
    left: 0;
    right: 0;
}
.join-challenge-block .container{position: relative;}
.challenge-block {position: relative; z-index: 1; background-color: rgb(var(--primary2)); padding: 100px; border-radius: var(--radius12); color: rgb(var(--color_white)); position: relative;}
.challenge-block p{color: #87A1BF; margin-bottom: 0;}
.challenge-block .btn-custom{background-color: rgb(var(--color_white)); color: rgb(var(--primary2));}
.join-challenge-block .child-pic { position: absolute; right: 50px; bottom: 0;}


.challenge-block::after{ content: ""; display: block; background-image: url('../images/pattern04.png'); background-repeat: no-repeat; background-position: 0 0; position: absolute; right: 0; bottom: 0; width: 604px; height: 430px; z-index: -1;}



/* partners-slider  */
#partners{position: relative;}
#partners::before{
    content: "";
    display: block;
    background-image: url('../images/pattern06.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
width: 444px;
    height: 257px;
    right:0;
    bottom: 0;
}
.partners-slider .item  .partner-pic{
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.partners-slider .item  .partner-pic img{
    width: auto;
}


/* faq */
#accordion .accordion-item {border: none; border-bottom: 1px solid #E8E8E8;}
#accordion .accordion-item .accordion-button{padding: 20px 0; color: rgb(var(--color_black)); font-weight: 700;}
#accordion .accordion-item .accordion-button:not(.collapsed){color: rgb(var(--color_black));}
#accordion .accordion-item .accordion-button::after{display: none;}
#accordion .accordion-item .accordion-button::before{content: "\2b"; font-family: 'FontAwesome'; margin-right: 10px; font-size: 0.70rem;}
#accordion .accordion-item .accordion-body{padding: 0 20px 20px 20px; color: rgb(var(--color_base));}
#accordion .accordion-item:last-child{border-bottom: none;}


.hr-clr{color: #E8E8E8;}

/* footer */
footer .f-logo{mix-blend-mode: darken;}
footer .top h6{font-weight: 400; color: rgb(var(--color_base));}
footer .top p, footer .top a{font-size: clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem); color: rgb(var(--color_base));}
footer .top p{margin-bottom: 0;}
footer .top a{text-decoration: none; }
footer .top a:hover{color: rgb(var(--primary1));}
.socila-media li{margin-right: 10px;}
.socila-media li a img{filter: var(--imgPimary1);}

footer .footer-links {
    padding: 0;
    margin-bottom: 0;
}

footer .footer-links li a {
    display: inline-block;
    color: rgb(var(--primary3));
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

footer .footer-links li a:hover{
    color: rgb(var(--primary1));
}

footer .bottom{padding-top: 20px; padding-bottom: 20px;}
footer .links{margin-bottom: 0;}
footer .links li{margin-left: 10px; padding-left: 10px; position: relative;}
footer .links li::before{content: "|"; display: block; position: absolute; left: 0px; color: rgb(var(--color_white));}
footer .links li:first-child::before{display: none;}
footer .links li a{color: rgb(var(--color_white)); }

footer .copyright{color: rgb(var(--color_white));}



/* Inner page css */
.pg-login{padding: calc(var(--padding) *1.2)  0; background: url('../images/bg.jpg') no-repeat center top; background-size: cover;}
.box{border: 1px solid #E8EEEC; padding: var(--padding-sm);}

.form label{font-size: 1rem; font-weight: 500; color: rgb(var(--color_base)); margin-bottom: 10px; line-height: normal;}
.form .form-control{ color: #BEBEBE; color: rgb(var(--color_base)); border-radius: calc(var(--radius12) /2); border: 1px solid rgb(var(--primary8)); padding: 14px 16px;}
.form .form-control:focus{box-shadow: none; }

.form-control::-webkit-input-placeholder { color: #BEBEBE;}
.form-control::-moz-placeholder {color: #BEBEBE; }
.form-control:-ms-input-placeholder {color: #BEBEBE; }
.form-control:-moz-placeholder {color: #BEBEBE; }

.form .input-group .form-control{border-right: none;}
.form .input-group .input-group-text{cursor: pointer; background-color: transparent; border-left: none; border-color: rgb(var(--primary8));}
.form .input-group .input-group-text .icon{background: url('../images/eye.png') no-repeat 0 0; width: 24px; height: 24px;}

.profile{display: flex; align-items: center; text-transform: uppercase;}
.profile img{flex-shrink: 0;}
.profile .text p{color: #8D8D8D;}
.profile .text h4{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 700; color: rgb(var(--primary1)); margin-bottom: 0;}


.help{text-decoration: none; color: #8D8D8D; display: flex; justify-content: flex-end;}
.help .icon{ filter: invert(61%) sepia(0%) saturate(0%) hue-rotate(279deg) brightness(91%) contrast(89%);; background: url('../images/help.png') no-repeat 0 0; background-size: cover; width: 24px; height: 24px; margin-right: 6px; display: inline-block; vertical-align: middle; transition: all .2s linear;}
.help:hover{color: rgb(var(--primary1));}
.help:hover .icon{filter: var(--imgPimary1);}


/* level-wrap */
.level-wrap{display: flex; flex-wrap: wrap; justify-content: space-between;}
.level-wrap .level{ width: 32%;}
.level-wrap .level span{background-color: #F5F5F5; height: 10px; display: block; margin-bottom: 5px;}
.level-wrap .level:first-child span{border-radius: 6px 0 0 6px;}
.level-wrap .level:last-child span{border-radius: 0 6px 6px 0;}
.level-wrap .level.active span{background-color: rgb(var(--primary4));}
.level-wrap .level .text{color: #BEBEBE; }

/* card-style01 */
.card-style01{padding: clamp(0.9375rem, 0.7969rem + 0.7031vw, 1.5rem); border: 1px solid rgb(var(--primary8)); border-radius: var(--radius12);}
.card-style01 h4{font-size: clamp(1rem, 0.875rem + 0.625vw, 1.5rem); margin-bottom: 12px;}

.card-style01{}
.card-style01 .level-number{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); color: rgb(var(--primary8)); margin-bottom: 10px; display: flex; align-items: center; }
.card-style01 .level-number .icon{display: inline-block; margin-left: 10px; background: url('../images/lock.png') no-repeat 0 0; background-size: cover;
width: 24px; height: 24px; filter: var(--imgPimary8);
}
.card-style01 h2.title {font-size: clamp(1.25rem, 0.9375rem + 1.5625vw, 2.5rem); color: rgb(var(--primary8));}
.card-style01 .btn-wrap .btn-custom{display: inline-block; vertical-align: middle; background-color:transparent; color: rgb(var(--primary8)); border-color: rgb(var(--primary8));}
.card-style01 .btn-wrap .btn-custom:first-child{background-color: rgb(var(--primary8)); color: rgb(var(--color_white));}
.card-style01 .btn-wrap .btn-custom:focus{border-color: rgb(var(--primary8));}
.card-style01 .btn-wrap .btn-custom .icon{background: url('../images/book-icon.png') no-repeat 0 0; display: inline-block; vertical-align: middle; width: 24px; height: 24px; background-size: cover; filter: var(--imgPimary8);}

.card-style01.active{border-color: rgb(var(--primary4));}
.card-style01.active h2.title {color: rgb(var(--primary4));}
.card-style01.active .level-number{color: rgb(var(--primary3));}
.card-style01.active .level-number .icon{display: none;}
.card-style01.active .btn-wrap .btn-custom{border-color: rgb(var(--primary4)); color: rgb(var(--primary4));}
.card-style01.active .btn-wrap .btn-custom:first-child{background-color: rgb(var(--primary4)); color: rgb(var(--color_white)); border-color: rgb(var(--primary4));}
.card-style01.active .btn-wrap .btn-custom .icon{
    filter: var(--imgPimary4);
}

/* challenge-item */
.challenge-item {border-radius: var(--radius12); padding: var(--padding-sm);}
.challenge-item .card{border: none;}
.challenge-item h4{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 700; color: rgb(var(--primary3)); margin-bottom: 10px;}
.challenge-item h2.title {font-size: clamp(1.25rem, 0.9375rem + 1.5625vw, 2.5rem); margin-bottom: 0;}
.challenge-item .btn-wrap .btn-custom:first-child{color: rgb(var(--color_white));}
.challenge-item .btn-wrap .btn-custom:hover,.challenge-item .btn-wrap .btn-custom:focus{background-color: transparent;}
.challenge-item .btn-wrap .btn-custom .icon{background: url('../images/book-icon.png') no-repeat 0 0; display: inline-block; vertical-align: middle; width: 24px; height: 24px; background-size: cover;}
.challenge-content{border-left: 1px solid #E8EEEC;}
.challenge-content .bullet-style{ margin: 0; padding: 0; list-style: none;  counter-reset: my-sec-counter;}
.challenge-content .bullet-style li{padding-left: 35px; position: relative; margin-bottom: 12px;}
.challenge-content .bullet-style li::before{ counter-increment: my-sec-counter; position: absolute; left: 0;
    content: counter(my-sec-counter); width: 24px; height: 24px; font-size: 1rem; font-weight: 700; display: inline-block; border-radius: 50%; text-align: center;
}

.challenge-item-01 {border: 1px solid rgb(var(--primary4)); }
.challenge-item-01 h2.title{color: rgb(var(--primary4));}
.challenge-item-01 .btn-wrap .btn-custom{color: rgb(var(--primary4)); border-color:  rgb(var(--primary4));;}
.challenge-item-01 .btn-wrap .btn-custom:first-child{background-color: rgb(var(--primary4)); border-color: rgb(var(--primary4)); }
.challenge-item-01 .btn-wrap .btn-custom .icon{filter: var(--imgPimary4);}
.challenge-item-01 .challenge-content .bullet-style li::before{ background-color: rgba(var(--primary4), 0.1); color: rgb(var(--primary4));}

.challenge-item-02 {border: 1px solid rgb(var(--primary5)); }
.challenge-item-02 h2.title{color: rgb(var(--primary5));}
.challenge-item-02 .btn-wrap .btn-custom{color: rgb(var(--primary5)); border-color:  rgb(var(--primary5));;}
.challenge-item-02 .btn-wrap .btn-custom:first-child{background-color: rgb(var(--primary5)); border-color: rgb(var(--primary5)); }
.challenge-item-02 .btn-wrap .btn-custom .icon{filter: var(--imgPimary5);}
.challenge-item-02 .challenge-content .bullet-style li::before{ background-color: rgba(var(--primary5), 0.1); color: rgb(var(--primary5));}

.challenge-item-03 {border: 1px solid rgb(var(--primary6)); }
.challenge-item-03 h2.title{color: rgb(var(--primary6));}
.challenge-item-03 .btn-wrap .btn-custom{color: rgb(var(--primary6)); border-color:  rgb(var(--primary6));;}
.challenge-item-03 .btn-wrap .btn-custom:first-child{background-color: rgb(var(--primary6)); border-color: rgb(var(--primary6)); }
.challenge-item-03 .btn-wrap .btn-custom .icon{filter: var(--imgPimary6);}
.challenge-item-03 .challenge-content .bullet-style li::before{ background-color: rgba(var(--primary6), 0.1); color: rgb(var(--primary6));}

.modal-dialog .btn-close{background: url('../images/close-icon.png') no-repeat 0 0; width: 32px; height: 32px;
    background-size: cover;
    right: 15px;
    top: 15px;
    z-index: 1;
}
.modal-dialog .btn-close:focus{box-shadow: none;}


/* leader-profile */
.leader-item .card{margin-bottom: 12px;}
.leader-item .card{border-radius: var(--radius12);}
.leader-item .leader-profile{padding: clamp(1.125rem, 0.9375rem + 0.9375vw, 1.875rem) clamp(0.9375rem, 0.7969rem + 0.7031vw, 1.5rem) 0; margin-bottom: 12px; position: relative; z-index: 2; }
.leader-item .leader-profile::before{content: ""; display: block; height: 80%; width: 100%; position: absolute; left: 0; top:0; z-index: -1; border-radius: var(--radius12) var(--radius12) 0 0;}
.leader-item .leader-profile .text {margin-left: 12px;}
.leader-item .leader-profile .text h4{font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem); font-weight: 700; margin-bottom: 10px;}
.leader-item .leader-profile .text h6{font-size: 1rem; text-transform: uppercase; font-weight: 700; margin-bottom: 0; color: rgb(var(--color_white)); background-color: rgb(var(--primary2)); padding: 6px 12px; border-radius: var(--radius12);}
.leader-item .leader-profile .text h6 sup{text-transform: none;}
.leader-item .leader-info{padding: 0 clamp(0.9375rem, 0.7969rem + 0.7031vw, 1.5rem) clamp(1.125rem, 0.9375rem + 0.9375vw, 1.875rem);}
.leader-item .leader-info .name{font-size: 1.125rem; font-weight: 700; color: rgb(var(--primary3));}
.leader-item .leader-info .score{
    border-left: 1px solid #E8E8E8;
    margin-left: 14px;
    padding-left: 24px;
}
.leader-item .leader-info .score h4{font-size: 1.125rem; font-weight: 700; margin-bottom: 5px; color: rgb(var(--primary3)); line-height: normal;}
.leader-item .leader-info .score h6 {color: rgb(var(--color_base)); margin-bottom: 0; line-height: normal;}

.common-card{padding: clamp(1.25rem, 1.0313rem + 1.0938vw, 2.125rem) clamp(0.9375rem, 0.7969rem + 0.7031vw, 1.5rem) clamp(0.9375rem, 0.7969rem + 0.7031vw, 1.5rem) clamp(1.25rem, 1.0313rem + 1.0938vw, 2.125rem); border-color: #E8E8E8; border-radius: var(--radius12);}
.common-card .item{padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #E8E8E8; display: flex; align-items: center;
    width: 100%;
}
.common-card .item:last-child{margin-bottom: 0; padding-bottom: 0; border: none;}
.common-card .item .image{margin-right: 14px; border-radius: 50%; position: relative;}
.common-card .item .image img{border-radius: 50%;}
.common-card .item .image .badge{position: absolute; left: 0; top: -10px; border-radius: 50px;
    font-size: clamp(0.75rem, 0.6875rem + 0.3125vw, 1rem); font-weight: 700; padding: 4px 8px;
}
.common-card .item .info h4,.common-card .item .score h4{font-size: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem); font-weight: 700; margin-bottom: 5px; color: rgb(var(--primary3)); line-height: normal;}
.common-card .item .info h6,.common-card .item .score h6{font-size: clamp(0.6875rem, 0.6406rem + 0.2344vw, 0.875rem); color: rgb(var(--color_base)); margin-bottom: 0; line-height: normal;}
.common-card .item .score{border-left: 1px solid #E8E8E8; margin-left: 14px; padding-left: 24px;}

.leader-item-01 .card:first-child{border-color: rgb(var(--primary4));}
.leader-item-01 .leader-profile::before{background-color: #FFF7ED; }
.leader-item-01 .common-card .item .image .badge{border: 1px solid rgb(var(--primary4)); color: rgb(var(--primary4)); background-color: #FFF7ED;}
.leader-item-01 .btn-custom{border-color: rgb(var(--primary4)); background-color: transparent; color: rgb(var(--primary4));}
.leader-item-01 .btn-custom:hover,.leader-item-01 .btn-custom:focus{border-color: rgb(var(--primary4)); background-color: rgb(var(--primary4)); color: rgb(var(--color_white));}

.leader-item-02 .card:first-child{border-color: rgb(var(--primary5));}
.leader-item-02 .leader-profile::before{background-color: #F0F9FF; }
.leader-item-02 .common-card .item .image .badge{border: 1px solid rgb(var(--primary5)); color: rgb(var(--primary5)); background-color: #F0F9FF;}
.leader-item-02 .btn-custom{border-color: rgb(var(--primary5)); background-color: transparent; color: rgb(var(--primary5));}
.leader-item-02 .btn-custom:hover,.leader-item-02 .btn-custom:focus{border-color: rgb(var(--primary5)); background-color: rgb(var(--primary5)); color: rgb(var(--color_white));}

.leader-item-03 .card:first-child{border-color: rgb(var(--primary6));}
.leader-item-03 .leader-profile::before{background-color: #F7FEE7; }
.leader-item-03 .common-card .item .image .badge{border: 1px solid rgb(var(--primary6)); color: rgb(var(--primary6)); background-color: #F7FEE7;}
.leader-item-03 .btn-custom{border-color: rgb(var(--primary6)); background-color: transparent; color: rgb(var(--primary6));}
.leader-item-03 .btn-custom:hover,.leader-item-03 .btn-custom:focus{border-color: rgb(var(--primary6)); background-color: rgb(var(--primary6)); color: rgb(var(--color_white));}


.back-arrow{background: url('../images/back-arrow.png') no-repeat 0 0;
    background-size: cover;
    width: 32px;
    height: 32px;
    text-decoration: none;
    display: block;
    filter: invert(37%) sepia(0%) saturate(3%) hue-rotate(77deg) brightness(96%) contrast(91%);
    position: absolute;
}
.back-arrow:hover{
    filter: var(--imgPimary1);
}

.w-title{color: #5E5E5E; text-transform: uppercase; font-weight: 700; }
.leader-winner-list{margin-top: 12px; padding: 12px; border-radius: var(--radius12); border-color: #E8E8E8; }
.leader-winner-list .rank{max-width: 40px; color: rgb(var(--primary3)); border-radius: var(--radius12); background-color: #F5F5F5; border:1px solid #8D8D8D; color: #8D8D8D; text-align: center; font-size: 16px; font-weight: 700; }
.leader-winner-list .image{margin-right: 12px;}
.leader-winner-list .text .name{font-size: 1.125rem; font-weight: 700; color: rgb(var(--primary3));}
.leader-winner-list .text .school-name{font-size: 1rem;}
.leader-winner-list .location{color: #5E5E5E;}
.leader-winner-list .score {position: relative; font-size: 1.25rem; font-weight: 700; text-align: center; margin-bottom: 0;}
.leader-winner-list:nth-child(-n+4) .score{color: rgb(var(--primary4)); }
.leader-winner-list .score::before{content: ""; display: block; position: absolute; width: 1px; height: 100%; background-color: #E8E8E8; left: 0; top: 0;}


.leader-winner-list-01:nth-child(-n+4) .rank{color: rgb(var(--primary4));  border: 1px solid rgb(var(--primary4)); background-color: #F7FEE7;}
.leader-winner-list-02:nth-child(-n+4) .score{color: rgb(var(--primary5)); }
.leader-winner-list-02:nth-child(-n+4) .rank{color: rgb(var(--primary5));  border: 1px solid rgb(var(--primary5)); background-color: #F0F9FF;}
.leader-winner-list-03:nth-child(-n+4) .score{color: rgb(var(--primary6)); }
.leader-winner-list-03:nth-child(-n+4) .rank{color: rgb(var(--primary6));  border: 1px solid rgb(var(--primary6)); background-color: #F7FEE7;}


/* progress-outer */
.progress-outer{margin-top: 12px; margin-bottom: 32px;}
.progress-outer .progress{height: 10px;}
.progress-outer .progress-bar{border-radius: 5px;}

/* question-card */
.question-card{border-radius: var(--radius12);  border: 1px solid #E8E8E8; padding: 34px 24px;}
.question-card .question{color: rgb(var(--primary3)); font-size: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);  font-weight: 700; line-height: normal;}
.question-card .question span{margin-bottom: 12px; color: #5E5E5E; font-size: 14px; text-transform: uppercase;}
.question-card .question small{font-size: 1rem; color: #8D8D8D; font-weight: 400; margin-top: 5px;}

.step-form .form-check{position: relative; display: flex; align-items: center; margin: 0; padding: 0;}
.step-form .form-check-input[type=radio]{border-radius: 15%;}
.step-form .form-check .form-check-label{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    position: relative;
    display: block;
    background-color: transparent;
    border:1px solid #E8E8E8;
    border-radius: var(--radius12);
    padding: 24px;
    margin-bottom: 24px;
    width: 100%;
    transition: all .1s linear;
}
.step-form .form-check .form-check-label .opt-number{
    width: 40px;
    text-align: center;
    color: rgb(var(--primary4));
    border: 1px solid rgb(var(--primary4));
    background-color: rgba(var(--primary4),0.1);
    border-radius: 50px;
    height: 26px;
    line-height: 23px;
    margin-right: 12px;
    display: inline-block;
    font-weight: 700;
    font-size: 1rem;
}
.step-form .form-check-input:checked + label {
background-color:rgba(var(--primary4),0.1);
color: rgb(var(--primary4));
border-color: rgb(var(--primary4));
}
.step-form .form-check-input:checked + .form-check-label .opt-number{
    background: none;
}
.step-form .form-check-input{
    display: none;
}

.step-form .button-wrap .btn-custom,.step-form .button-wrap .btn-custom:hover,.step-form .button-wrap .btn-custom:focus{background-color: rgb(var(--primary4)); border-color: rgb(var(--primary4)); color: rgb(var(--color_white));}
.step-form .button-wrap .prev-button{
    color: #8D8D8D;
    border-color: #8D8D8D;
    background-color: transparent;
}
.step-form .button-wrap .prev-button:hover,.step-form .button-wrap .prev-button:focus{
    color: rgb(var(--color_white));
    background-color: #8D8D8D;
    border-color: #8D8D8D;
}

.step-form .question-card.style02 .form-check .form-check-label{font-size: clamp(0.9375rem, 0.825rem + 0.5625vw, 1.5rem); text-align: center;
    line-height: normal;
}
.step-form textarea.form-control{resize: none;
    border:1px solid #E8E8E8;
    min-height: 150px;
}
.step-form textarea.form-control:focus{
    box-shadow: none;
}
#the-count{
    text-align: right;
    color: #8D8D8D;
}


/* completed-block */
.completed-block h3{color: rgb(var(--primary1));
    font-size: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
    margin-bottom: 0;
    font-weight: 700;
}
.completed-block .completed-icon{background: url('../images/animate-bg.gif') no-repeat center top;  width: 150px; height: 150px;
background-size: cover; position: relative; margin: 0 auto;
}
.completed-block .completed-icon img{position: absolute; inset: 0; margin: auto;}


.certificate, .logout{text-decoration: none;}

.link-wrap{display: flex; justify-content: flex-end;}
.link-wrap a{text-decoration: none; color: #8D8D8D; margin-left: 45px; font-weight: 700; text-transform: uppercase;}
.link-wrap a .icon{margin-right: 10px;}
.link-wrap a:first-child .icon img{filter: invert(33%) sepia(13%) saturate(0%) hue-rotate(148deg) brightness(102%) contrast(87%);}
.link-wrap a:first-child{margin-left: 0;}
.link-wrap a.certificate{color: #5E5E5E;}
.link-wrap a.logout{color: #E04645;}



/* profile-block */
.profile-block h4{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); margin-bottom: 1.5rem; margin-top: 0.5rem; color: rgb(var(--primary2));}
.profile-block .form-control{border-color: #D9D9D9; border-radius: calc(var(--radius12) / 2); padding: 14px 16px; line-height: normal;}
.profile-block .form-control:focus{box-shadow: none; outline: none; border-color: rgb(var(--primary1));}
.profile-block .change-pwd{background-color: transparent; border: none; padding: 0;}
.profile-block .change-pwd:hover,.profile-block .change-pwd:focus{background-color: transparent; color: rgb(var(--primary1)); border: none;}

.change-password .form-control{border-color: #D9D9D9; border-radius: calc(var(--radius12) / 2); padding: 14px 16px; line-height: normal;}
.change-password .form-control:focus{box-shadow: none; outline: none; border-color: rgb(var(--primary1));}

/* certificate-cards */
.certificate-cards{}
.certificate-cards .certificate-item{border-radius: 8px; text-align: center; padding: var(--padding-sm) calc(var(--padding-sm) / 2) calc(var(--padding-sm) / 2); position: relative;}
.certificate-cards .certificate-item .icon{margin-bottom: 30px; position: relative; z-index: 1;}
.certificate-cards .certificate-item::before{content: ""; background: url('../images/pattern07.png') no-repeat center top; height: 108px; width: 100%; background-size: cover; position: absolute; left: 0; top:0;}
.certificate-cards .certificate-item h3{color: rgb(var(--primary3)); font-size: clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem); font-weight: 700;}

.certificate-cards .certificate-item .btn-custom {text-transform: uppercase; }
.certificate-cards .certificate-item .btn-custom .icon{
background: url('../images/certificate-icon.png') no-repeat 0 0;
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background-size: cover;
margin-bottom: 0;
}
.certificate-cards .certificate-item .btn-custom:hover,.certificate-cards .certificate-item .btn-custom:focus{
    color: rgb(var(--color_white));
}


.certificate-cards .certificate-item01{border-color: rgb(var(--primary4));}
.certificate-cards .certificate-item01 h2.title{color: rgb(var(--primary4));}
.certificate-cards .certificate-item01 .btn-custom{color: rgb(var(--primary4)); border-color: rgb(var(--primary4));}
.certificate-cards .certificate-item01 .btn-custom .icon{filter: var(--imgPimary4);}
.certificate-cards .certificate-item01 .btn-custom:hover,.certificate-cards .certificate-item01 .btn-custom:focus{
    border-color: rgb(var(--primary4));
    background-color: rgb(var(--primary4));
}
.certificate-cards .certificate-item01 .btn-custom:hover .icon,.certificate-cards .certificate-item01 .btn-custom:focus .icon{
    filter:var(--imgWhite);
}

.certificate-cards .certificate-item02{border-color: rgb(var(--primary5));}
.certificate-cards .certificate-item02 h2.title{color: rgb(var(--primary5));}
.certificate-cards .certificate-item02 .btn-custom{color: rgb(var(--primary5)); border-color: rgb(var(--primary5));}
.certificate-cards .certificate-item02 .btn-custom .icon{filter: var(--imgPimary5);}
.certificate-cards .certificate-item02 .btn-custom:hover,.certificate-cards .certificate-item02 .btn-custom:focus{
    border-color: rgb(var(--primary5));
    background-color: rgb(var(--primary5));
}
.certificate-cards .certificate-item02 .btn-custom:hover .icon,.certificate-cards .certificate-item02 .btn-custom:focus .icon{
    filter:var(--imgWhite);
}

.certificate-cards .certificate-item03{border-color: rgb(var(--primary6));}
.certificate-cards .certificate-item03 h2.title{color: rgb(var(--primary6));}
.certificate-cards .certificate-item03 .btn-custom{color: rgb(var(--primary6)); border-color: rgb(var(--primary6));}
.certificate-cards .certificate-item03 .btn-custom .icon{filter: var(--imgPimary6);}
.certificate-cards .certificate-item03 .btn-custom:hover,.certificate-cards .certificate-item03 .btn-custom:focus{
    border-color: rgb(var(--primary6));
    background-color: rgb(var(--primary6));
}
.certificate-cards .certificate-item03 .btn-custom:hover .icon,.certificate-cards .certificate-item03 .btn-custom:focus .icon{
    filter:var(--imgWhite);
}