/* ****************************** variables **************************************  */
:root {
    --bg: #f7f7f7;
    --first: #ef3f3e;
    --firstblood: #af2d2d;

    --second: #818285;
    --third: #3d3d3d;

    --50: #f6f6f6;
    --100: #e7e7e7;
    --200: #d1d1d1;
    --300: #b0b0b0;
    --400: #888888;
    --400: #888888;
    --500: #6d6d6d;
    --600: #5d5d5d;
    --700: #4f4f4f;
    --800: #454545;
    --900: #3d3d3d;
    --950: #252525;

    /*headline variables*/
    --headline-1-bold--size: 48px;
    --headline-1-bold--weight: 700;

    --headline-1-regular--size: 48px;
    --headline-1-regular--weight: 500;

    --headline-1-light--size: 48px;
    --headline-1-light--weight: 300;

    --headline-2-bold--size: 32px;
    --headline-2-bold--weight: 700;

    --headline-2-regular--size: 32px;
    --headline-2-regular--weight: 500;

    --headline-2-light--size: 32px;
    --headline-2-light--weight: 300;

    /* title variables */
    --title-1-bold--size: 22px;
    --title-1-bold--weight: 700;

    --title-1-regular--size: 22px;
    --title-1-regular--weight: 500;

    --title-1-light--size: 22px;
    --title-1-light--weight: 300;

    --title-2-bold--size: 18px;
    --title-2-bold--weight: 700;

    --title-2-regular--size: 18px;
    --title-2-regular--weight: 500;

    --title-2-light--size: 18px;
    --title-2-light--weight: 300;


    /* body variables */
    --body-1-bold--size: 16px;
    --body-1-bold--weight: 700;

    --body-1-regular--size: 16px;
    --body-1-regular--weight: 500;

    --body-1-light--size: 16px;
    --body-1-light--weight: 300;

    --body-2-bold--size: 14px;
    --body-2-bold--weight: 700;

    --body-2-regular--size: 14px;
    --body-2-regular--weight: 500;

    --body-2-light--size: 14px;
    --body-2-light--weight: 300;

    /* caption variables */
    --caption-1-bold--size: 12px;
    --caption-1-bold--weight: 700;

    --caption-1-regular--size: 12px;
    --caption-1-regular--weight: 500;

    --caption-1-light--size: 12px;
    --caption-1-light--weight: 300;

    --caption-2-bold--size: 10px;
    --caption-2-bold--weight: 700;

    --caption-2-regular--size: 10px;
    --caption-2-regular--weight: 500;

    --caption-2-light--size: 10px;
    --caption-2-light--weight: 300;


    --swiper-pagination-color: var(--300);
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-width: 8px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-inactive-color: #000;
    --swiper-pagination-bullet-inactive-opacity: 0.2;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-bullet-vertical-gap: 6px;

    scroll-behavior: smooth;

}

html {
    scroll-behavior: smooth;
}


/* ********************************* global styles  ********************************************** */
.bggray100{
    background: var(--100);
    padding:5px 10px;
}


body {
    background: var(--bg);
}

.swiper-pagination {
    bottom: -20px;
    left: 0;
    transform: translateY(50%) !important
}

.swiper-navigation {
    position: absolute !important;
    right: 50px;
    bottom: -20px;

}

.swiper-navigation.vertical-swiper{
    bottom: -25px;
}

.swiper-navigation .swiper-button-next, .swiper-navigation .swiper-button-prev {
    width: 45px;
    height: 45px;
}

.swiper-navigation .swiper-button-next:after {
    content: '';
    background-image: url('data:image/svg+xml,<svg width="45" height="45" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="23" cy="23" r="22" stroke="%23979797" stroke-width="2"/><path d="M29.7084 22.0417H18.3425L21.8213 17.8634C21.984 17.6677 22.0622 17.4154 22.0389 17.162C22.0155 16.9086 21.8924 16.6748 21.6967 16.5121C21.501 16.3495 21.2487 16.2712 20.9953 16.2946C20.7419 16.3179 20.5081 16.441 20.3455 16.6367L15.5538 22.3867C15.5216 22.4325 15.4927 22.4805 15.4675 22.5305C15.4675 22.5784 15.4675 22.6071 15.4005 22.6551C15.357 22.7649 15.3343 22.8819 15.3334 23.0001C15.3343 23.1182 15.357 23.2352 15.4005 23.3451C15.4005 23.393 15.4005 23.4217 15.4675 23.4696C15.4927 23.5196 15.5216 23.5677 15.5538 23.6134L20.3455 29.3634C20.4356 29.4716 20.5484 29.5586 20.6759 29.6182C20.8035 29.6778 20.9426 29.7086 21.0834 29.7084C21.3073 29.7088 21.5243 29.6308 21.6967 29.488C21.7937 29.4075 21.874 29.3087 21.9328 29.1972C21.9916 29.0857 22.0278 28.9637 22.0393 28.8382C22.0509 28.7127 22.0376 28.5861 22.0002 28.4657C21.9628 28.3454 21.902 28.2336 21.8213 28.1367L18.3425 23.9584H29.7084C29.9625 23.9584 30.2063 23.8574 30.386 23.6777C30.5657 23.498 30.6667 23.2542 30.6667 23.0001C30.6667 22.7459 30.5657 22.5021 30.386 22.3224C30.2063 22.1427 29.9625 22.0417 29.7084 22.0417Z" fill="%23979797"/></svg>');
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
    background-size: cover;
}

.swiper-navigation .swiper-button-prev:after {
    content: '';
    background-image: url('data:image/svg+xml,<svg width="45" height="45" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="23" cy="23" r="23" transform="rotate(-180 23 23)" fill="%23979797"/><rect width="23" height="23" transform="matrix(-1 0 0 -1 34.5 34.5)" fill="%23979797"/><path d="M16.2916 23.9583H27.6575L24.1787 28.1366C24.016 28.3323 23.9378 28.5846 23.9611 28.838C23.9845 29.0914 24.1076 29.3252 24.3033 29.4879C24.499 29.6505 24.7513 29.7288 25.0047 29.7054C25.2581 29.6821 25.4919 29.559 25.6545 29.3633L30.4462 23.6133C30.4784 23.5675 30.5073 23.5195 30.5325 23.4695C30.5325 23.4216 30.5325 23.3929 30.5995 23.3449C30.643 23.2351 30.6657 23.1181 30.6666 22.9999C30.6657 22.8818 30.643 22.7648 30.5995 22.6549C30.5995 22.607 30.5995 22.5783 30.5325 22.5304C30.5073 22.4804 30.4784 22.4323 30.4462 22.3866L25.6545 16.6366C25.5644 16.5284 25.4516 16.4414 25.3241 16.3818C25.1965 16.3222 25.0574 16.2914 24.9166 16.2916C24.6927 16.2912 24.4757 16.3692 24.3033 16.512C24.2063 16.5925 24.126 16.6913 24.0672 16.8028C24.0084 16.9143 23.9722 17.0363 23.9607 17.1618C23.9491 17.2873 23.9624 17.4139 23.9998 17.5343C24.0372 17.6546 24.098 17.7664 24.1787 17.8633L27.6575 22.0416H16.2916C16.0375 22.0416 15.7937 22.1426 15.614 22.3223C15.4343 22.502 15.3333 22.7458 15.3333 22.9999C15.3333 23.2541 15.4343 23.4979 15.614 23.6776C15.7937 23.8573 16.0375 23.9583 16.2916 23.9583Z" fill="white"/></svg>');
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
}

@media (max-width: 991px) {
    .swiper-pagination {
        bottom: unset
    }

    .swiper-pagination.features-swiper-pagination , .swiper-pagination.vertical-swiper-container-pagination{
        bottom: -20px
    }
}

.swiper-pagination .swiper-pagination-bullet {
    position: relative;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    /*padding: 4px;*/
    background: var(--200) !important;
    border: 1px solid #d4d4d4;
    opacity: 1 !important
}

.rtl .swiper-pagination .swiper-pagination-bullet {
    margin-right: 0;
    margin-left: 7px
}

@media (max-width: 767px) {
    .swiper-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin-right: 7px
    }
}

.swiper-pagination .swiper-pagination-bullet:last-child {
    margin-right: 0
}

.rtl .swiper-pagination .swiper-pagination-bullet:last-child {
    margin-right: auto;
    margin-left: 0
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
    content: "";
    width: 15px;
    height: 10px;
    border-radius: 50px;
    background-color: var(--600) !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media (max-width: 767px) {
    .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
        width: 12px;
        height: 8px
    }
}

.home-sections > div.justify-content-between {
    /*margin-right: 42%;*/
}

.home-sections div.justify-content-between a {
    font-size: var(--body-2-light--size);
    font-weight: var(--body-2-light--weight);
    color: var(--500);
    background: transparent !important;
}

.home-sections > div.justify-content-between > a::after {
    content: '';
    z-index: 85;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 8L5.2071 11.2929C4.81658 11.6834 4.81658 12.3166 5.2071 12.7071L8.5 16M5.5 12L19.5 12" stroke="%23979797" stroke-width="1.5" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    transition: 0.1s;
    transform: translateX(-2px);
}


.home-sections > div.justify-content-between > a:hover::after {
    transform: translateX(-5px);
}

.section-title{
    color: var(--900) !important;
}

.text-dark-blue{
    color: var(--900) !important;
}

/* ********************************************** navbar top styles ******************************************************** */

.navbar {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: translateY(10px);
    color: var(--third);
}

.navbar #navbarContentTwo {
    position: fixed;
    top:-10%;
    right: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 501;
    background-color: #fff;
    transition: top .4s cubic-bezier(.43,.83,.54,1.02), opacity .4s linear;
    border-radius: 0;
    padding: 20px;
}

.navbar .container {
    background: var(--100);
    border-radius: 100px;
    padding: 10px;
}

.navbar .navbar-brand {
    width: 120px;
    height: 35px;
}

.navbar form[action="/search"] input {
    width: 100px;
}

.navbar button span.badge {
    position: absolute;
    top: 11px;
    width: 11px;
    height: 13px;
}

.navbar button::after {
    display: none;
}

.navbar img.rounded-circle {
    width: 50px;
    height: 50px;
}

.reglogbtn {
    border: 1px solid var(--first);
    color: var(--first);
    border-radius: 100px;
    padding-right: 10px;
    transition: 0.1s;
}

.reglogbtn:hover {
    background: var(--first);
}


.reglogbtn a {
    color: var(--first);
}

.reglogbtn:hover a {
    color: var(--100)
}

/* **************************************** section hero and animations **************************************************** */

.heroes-box {
    height: 700px;
    background-image: url("/assets/default/img/newhomebg.png");
    background-position: left;
    background-repeat: no-repeat;

}

.heroes-box-mobile{
    height: 110vh;
    background-image: url("/assets/default/img/newhomebg.png");
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

#webCounter {
    opacity: 0;
    animation: fadeIn 5s forwards;
    animation-delay: 2s;

}

@keyframes fadeIn {
    from {
        opacity: 0; /* Start from totally transparent */
    }
    to {
        opacity: 0.8; /* End with full visibility */
    }
}

.heroes-box #webCounter .counter {
    width: 150px;
    height: 138px;
    background: white;
    margin: 10px;
    border-radius: 10%;
}

.heroes-box #webCounter .counter h4, .heroes-box #webCounter .counter strong {
    font-size: var(--body-2-bold--size);
    font-weight: var(--body-2-bold--weight);
}


.heroes-box #webCounter .counter p {
    font-size: var(--caption-1-light--size);
    font-weight: var(--caption-1-light--weight);
}

.heroes-box .heroes-button-box {
    height: 200px;
    background-image: url("/assets/default/img/scrollbuttonbg.png");
    background-repeat: no-repeat;
    background-size: 29%;
    background-position: bottom right;

}

.heroes-box:not(.heroes-box-mobile) .heroes-button-box button {
    position: relative;
    top: 150px;
    transition: 0.3s;
    left: 24px;
}

.heroes-box-mobile .heroes-button-box button {
    /*display: block;*/
    /*margin: auto;*/
    position: relative;
    top: 150px;
    transition: 0.3s;
    left:-50px;
}

.center-con {
    display: flex;
    align-items: center;
    justify-content: center;

}

.round {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    cursor: pointer;
}

#cta {
    width: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    transform: rotate(90deg);
}

#cta .arrow {
    left: 30%;
}

.arrow {
    position: absolute;
    margin-left: 0px;
    width: 32px;
    height: 32px;
    background-size: contain;
    top: 14px;
}

.segunda {
    margin-left: 8px;
}

.next {

    background-image: url('https://img.icons8.com/ios-glyphs/30/979797/chevron-right.png');
}

@keyframes bounceAlpha {
    0% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
    25% {
        opacity: 0;
        transform: translateX(10px) scale(0.9);
    }
    26% {
        opacity: 0;
        transform: translateX(-10px) scale(0.9);
    }
    55% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
}

@media (min-width: 577px) {
    .bounceAlpha {
        animation-name: bounceAlpha;
        animation-duration: 1.4s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .arrow.primera.bounceAlpha {
        animation-name: bounceAlpha;
        animation-duration: 1.4s;
        animation-delay: 0.2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .round .arrow {
        animation-name: bounceAlpha;
        animation-duration: 1.4s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .round .arrow.primera {
        animation-name: bounceAlpha;
        animation-duration: 1.4s;
        animation-delay: 0.2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

@media (max-width: 576px) {
    .arrow.primera {
        animation-name: bounceAlpha;
        animation-duration: 2s;
        animation-delay: 1.2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .arrow {
        animation-name: bounceAlpha;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}


.heroes-headline h1 {
    font-size: var(--headline-1-bold--size);
    font-weight: var(--headline-1-bold--weight);
}

.heroes-headline h1 span {
    color: var(--first);
}

.heroes-headline p {
    font-size: var(--title-1-regular--size);
    font-weight: var(--title-1-regular--weight);
}

.cat-horizonttal-menu .cat-horizonttal-menu-icon {
    width: 50px;
    max-width: 50px;
    min-width: 50px;

}

button.cat-horizonttal-menu-icon {
    height: 50px;
    background: var(--200);
}


/* ************************************************* horizontal webinar cards and swiper style *************************************************** */
.webinar-card-redesign {
    width: 197px;
    height: 306px;
    background: white;
    padding: 7px;
}

.webinar-card-redesign .img-box {
    padding: 10px;
    height: 114px !important;
    position: relative;
}

.webinar-card-redesign .badge {
    position: absolute;
    left: 17px;
    border-radius: .3125rem .3125rem .3125rem 0;
}

.webinar-card-redesign .img-box a {
    width: 100%;
    height: 100%;
}


.webinar-card-redesign img.cover {
    width: 185px !important;
    height: 114px !important;
}

.webinar-card-redesign .webinar-card-body a.user-name {
    font-size: var(--caption-1-light--size);
    font-weight: var(--caption-1-light--size);
}

.webinar-card-redesign .webinar-card-body .avatar {
    max-width: 25px;
    min-width: 25px;
    height: 25px;

}

.webinar-card-redesign .webinar-card-body .webinar-title {
    margin-top: 10px;
    font-size: var(--title-2-bold--size);
    font-weight: var(--title-2-bold--weight);
}

.webinar-card-redesign .webinar-card-body #webinar-datetime span {
    margin-top: 10px;
    font-size: var(--caption-2-light--size);
    font-weight: var(--caption-2-light--weight);
}

.webinar-card-redesign .webinar-card-body > span {
    margin-bottom: 10px;
}

.webinar-card-redesign .webinar-card-body .webinar-price-box {
    text-align: right;
    position: absolute;
    bottom: 15px;
    width: 185px;
}

.webinar-card-redesign .webinar-card-body .webinar-price-box span {
    font-size: var(--caption-1-regular--size);
    font-weight: var(--caption-1-regular--weight);
    text-align: center;

}

.webinar-card-redesign .webinar-card-body hr {
    margin: 5px 0 5px 0;
}

/* ******************************************************** section hero 2 styles ******************************************************************** */

/*background: #fefefea3;*/

section.slider-container{
    background-image: url('/assets/default/img/HugeGlobal.png');
    background-size:80%;
    height:60vh;
    margin:50px 0 50px 0;
}

.heroes-section2-box {
    background: #fefefe99;
    padding: 20px;
    border-radius: 20px;

}

.heroes-section2-box h1 {
    font-size: var(--headline-2-regular--size) !important;
    font-weight: var(--headline-2-regular--weight);
    color: var(--950) !important;
}

.heroes-section2-box form[action="/search"] input, .heroes-section2-box form[action="/search"] > div {
    background: var(--100);
}

.heroes-section2-box form[action="/search"] button {
    background: var(--first);
}

/* ***************************************************** list card and professional webinars ******************************************** */
.home-section-features {
    background: url("/assets/default/img/specialcoursesbg.png");
    background-repeat: no-repeat;
    height: auto;

}

.home-section-features .swiper-container{
    height: calc(120px * 6);
    width: 100%;
}

.webinar-card-redesignlist {
    padding: 10px;
    width: 500px;
    height: 120px !important;
    background: white;
    margin: 10px;
    border-radius: 15px;
}

.webinar-card-redesignlist .image-box {
    width: 149px !important;
    min-width: 149px !important;
    max-width: 149px !important;
    height: 100px !important;
    position: relative;

}

.webinar-card-redesignlist .image-box span.badge {
    position: absolute;
    left: 0;
}

.webinar-card-redesignlist .image-box .img-cover {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.webinar-card-redesignlist .webinar-card-body {
    width: auto;
    height: auto;
    padding-right: 10px !important;

}

.webinar-card-redesignlist .webinar-card-body .webinar-title {
    font-size: var(--title-2-bold--size);
    font-weight: var(--title-2-bold--weight);
}

.webinar-card-redesignlist .webinar-card-body span {
    font-size: var(--caption-2-light--size);
    font-weight: var(--caption-2-light--weight);
}

.webinar-card-redesignlist .webinar-card-body .user-inline-avatar .avatar {
    width: 25px;
    max-width: 25px;
    min-width: 25px;
    height: 25px;
    border-radius: 50%
}

.webinar-card-redesignlist .webinar-card-body .user-inline-avatar .user-name {
    font-size: var(--caption-2-light--size);
    font-weight: var(--caption-2-light--weight);
}

.webinar-card-redesignlist .webinar-card-body .webinar-price-box span {
    font-size: var(--title-2-bold--size);
    font-weight: var(--title-2-bold--weight);
}

/* ******************************************************* home section start live course ***************************** */
h2.h2 {
    color: var(--800);
    font-size: var(--headline-2-bold--size);
    font-weight: var(--headline-2-bold--weight);
}

p.p {
    font-size: var(--title-2-light--size);
    font-weight: var(--title-2-light--weight);
    color: var(--600);
}

button.btn-first {
    background: var(--first);
    color: #fff;
    border-radius: 100px;
}

button.btn-first:hover {
    background: var(--firstblood);
    color: #fff;
}

button.btn-second {
    border: var(--first);
    color: var(--first);
}


/* ********************************** hero box center page ************************************ */
.row-first-hero-box h2{
    font-size: var(--headline-2-bold--size) !important;
    font-weight: var(--headline-2-bold--weight) !important;
}

.row-first-hero-box p{
    /*--body-2-regular--size*/
    font-size: var(--title-2-regular--size) !important;
    font-weight: var(--title-2-regular--weight) !important;
}

.reward-program-section-hero{
    width: 450px;
    height: 250px;
}

/* ******************************************************** instruction hero section ********************************** */
.instructors-swiper-container{
    width:100vw;
    display: flex;
}
.instructors-swiper-container .instructors-card{
    width:240px;
    height: 90px;

}

.instructors-card-avatar {
    width: 120px !important;
    height: 90px !important;
    overflow: hidden;
}
.instructors-card-avatar img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.instructors-swiper-container .swiper-slide {
    margin-top: 33px;
}

.instructors-swiper-container .swiper-slide.swiper-slide-active {
    margin-top: 0
}


.instructors-swiper-container .swiper-slide.swiper-slide-active .instructors-card .instructors-card-avatar {
    width: 120px;
    height: 100%;
}

.instructors-swiper-container .swiper-slide.swiper-slide-active .instructors-card .instructors-card-avatar img {
    opacity: 1
}

 .instructors-card-info {
    display: block;
    padding-right: 5px;
}

.instructors-card-info a h3{
    font-size: var(--body-1-regular--size);
    font-weight: var(--body-1-regular--weight);
}

.instructors-card-info p{
    font-size: var(--caption-2-regular--size);
    font-weight: var(--caption-2-regular--weight);
}

.instructors-card-info .stars-card{
    width: 50px;
    height: 10px;
}

.tag-list {

    max-width: 90vw;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: 1rem 0;
    position: relative;
    padding: 1.5rem 0;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, #0000, #000 5% 95%, #0000);

}

.loop-slider .inner {
    display: flex;

    animation-name: loop;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--direction);
    animation-duration: var(--duration);
    /*transform: translateX(-20%);*/
}


.loop-slider .inner .tag{
    margin:12px;
}


.fade {
    pointer-events: none;
    background: linear-gradient(90deg, #1e293b, transparent 30%, transparent 70%, #1e293b);
    position: absolute;
    inset: 0;
}

@keyframes loop {

    0%{
        transform: translateX(0%);
    }
    100% {
        transform: translateX(20%);
    }
}


/* ****************************************************** blog grid ********************************************************* */
.blog-grid-detail{
    width: 80%;
    position: absolute;
    top: 130px;
    left: 39px;
    background: white;
    z-index: 99;
}

.swiper-container.blog-swiper-container .swiper-slide{
    width: 350px !important;
}

.link-article{
    color: var(--first);
}

/* ***************************************************** footer styles ******************************************************* */
.footer{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23f7f7f7" fill-opacity="1" d="M0,288L60,261.3C120,235,240,181,360,154.7C480,128,600,128,720,149.3C840,171,960,213,1080,224C1200,235,1320,213,1380,202.7L1440,192L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path></svg>');
    background-repeat: no-repeat;
    background-position: top;
    background-color: var(--300);
    padding-top: 100px;

}

.footer .footer-subscribe {
    position: relative;
    top: -100px;
    height: 200px;
    background-image:unset !important;
    background-color: transparent !important;
    border-radius: 15px;
    padding: 25px;
}

.footer .footer-subscribe .subscribe-input{
    background: var(--100 );
    width: 480px;
    min-width: 480px;
    max-width: 480px;
}

.footer .footer-subscribe strong{
    font-size: var(--headline-2-bold--size);
    font-weight: var(--headline-2-bold--weight);
}

.footer .footer-subscribe strong{
    font-size: var(--headline-2-bold--size);
    font-weight: var(--headline-2-bold--weight);
}

.footer .footer-subscribe span{
    font-size: var(--title-2-regular--size);
    font-weight: var(--title-2-regular--weight);
}

.footer .footer-subscribe .subscribe-input input{
    background: transparent;
}
.footer .footer-subscribe .subscribe-input button{
    background: var(--first);
}
.footer .footer-subscribe .subscribe-input button:hover{
    background: var(--firstblood);
}

.about-section .about-caption{
    font-size: var(--caption-1-regular--size);
    font-weight: var(--caption-1-regular--weight);
}

.about-section .enamad-logo img{
    width: 80px;
    height: 80px;
}

.Useful-links p font{
    color: #272727 !important;
}

/* ******************************************************** media queries section ********************************************************************* */
@media only screen and (max-width: 600px) {

    .container{
        width: 95% !important;
    }

    /* ***************** headline ******************************** */

    .heroes-headline h1 {
        font-size: 28px;
        font-weight: var(--headline-1-bold--weight);
    }

    .heroes-headline h1 span {
        color: var(--first);
    }

    .heroes-headline p {
        font-size: var(--body-2-regular--size);
        font-weight: var(--body-2-regular--weight);
    }

    /* ***************** heroes top responsives ****************** */
    .cat-horizonttal-menu .cat-horizonttal-menu-icon {
        width: 35px;
        max-width: 35px;
        min-width: 35px;

    }

    .cat-title{
        font-size: var(--caption-1-regular--size);
        font-weight: var(--caption-1-regular--weight);
        padding: 3px;
    }

    button.cat-horizonttal-menu-icon{
        height: 35px;
    }

    .heroes-box-mobile .heroes-button-box {
        height: 200px;
        background-image: url("/assets/default/img/scrollbuttonbg.png");
        background-repeat: no-repeat;
        background-size: 29%;
        background-position: top center;

    }

    .heroes-box .heroes-button-box button {
        position: relative;
        top: 15px;
        transition: 0.3s;
        left:-90px;
    }

    /* ****************** heroes section **********************   */
    .home-sections > div.justify-content-between {
        margin-right: 0;
    }

    .home-sections div.justify-content-between a {
        font-size: var(--body-2-light--size);
        font-weight: var(--body-2-light--weight);
        color: var(--500) !important;
        background: transparent !important;
        padding-left: 0 ;
    }

    .home-sections > div.justify-content-between > a::after {
        content: '';
        z-index: 99999;
        width: 24px;
        height: 24px;
        background-image: unset;
        background-repeat: no-repeat;
        transition: 0.1s;
        transform: translateX(-2px);
    }

    /* ******************** swiper slides ***************************   */
    /*.swiper-slide{
        filter: blur(1px);
    }
    .swiper-slide:hover{
        filter: blur(0px);
    }

    .swiper-slide.swiper-slide-active{
        z-index: 99;
        filter: blur(0);
    }*/

    .swiper-slide:not(.list-cont){
        width: 60%;
    }

    /* ******************** section world background ********************* */
    section.slider-container{

        background-size:100% ;
        height:400px;
        margin:30px 0 30px 0;
    }

    /* ************************ proffesional webinars **********************   */

    .heroes-box-mobile{
        height: 110vh;
        background-image: url("/assets/default/img/newhomebg.png");
        background-size: 70%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .home-section-features{
        background-size: 100%;
        background-repeat: no-repeat;
        height: fit-content;
        margin: 100px 0 100px 0 !important;
    }

    .home-section-features .swiper-container{
        height: auto;
        min-height: auto;
        max-height: 800px;
    }

    .webinar-card-redesignlist {
        padding: 10px;
        width: auto;
        height: 140px !important;
        background: white;
        border-radius: 15px;
    }

    .list-cont{
        height: 140px !important;
    }

    .webinar-card-redesignlist .image-box {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 120px !important;
        position: relative;

    }

    .loop-slider .inner {
        display: flex;

        animation-name: loop;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: var(--direction);
        animation-duration: var(--duration);
        /*transform: translateX(-20%);*/
    }


    @keyframes loop {

        0%{
            transform: translateX(0%);
        }
        100% {
            transform: translateX(250%);
        }
    }

    .swiper-container.blog-swiper-container{
        height: 400px;
    }

    .swiper-container.blog-swiper-container .swiper-slide{
        width: 250px !important;
    }

    .image-box span.badge {
        position: absolute;
        left: 22px;
    }

    /* ********************************** hero box center page ************************************ */
    .row-first-hero-box h2{
        font-size: var(--title-2-bold--size) !important;
        font-weight: var(--title-2-bold--weight) !important;


    }

    .row-first-hero-box p{
        /*--body-2-regular--size*/
        font-size: var(--body-2-regular--size) !important;
        font-weight: var(--body-2-regular--weight) !important;

    }

    .reward-program-section-hero , .find-instructor-section-hero-two ,.find-instructor-section-hero2{
        width: 320px;
        height: 190px;
    }

    .heroes-section2-box h1 {
        font-size: var(--title-1-bold--size) !important;
        font-weight: var(--headline-2-regular--weight);
        color: var(--950) !important;
    }


    /* *******************************  blog card ************************************* */

    .blog-grid-card{
        background: transparent;
        box-shadow: unset;
    }

    .blog-grid-title-redesign{
        font-size: var(--body-2-bold--size);
        font-weight: var(--body-2-bold--weight);
        color:var(--second);
    }

    .caption-post-blog-redesign{
        font-size: var(--caption-2-regular--size);
        font-weight: var(--caption-2-regular--weight);
    }


    .blog-grid-card:hover{
        box-shadow: unset;
    }

    .blog-grid-image{
        width: 250px;
        height: 150px;
        background: transparent !important;
    }
    .blog-grid-image img{
        width: 250px;
        height: 150px;
    }

    .blog-grid-image::after{
        content: unset !important;
        background: unset;
    }

    .blog-grid-detail{
        width: 220px;
        height: 160px;
        position: absolute;
        top: 70px;
        left: 15px;
        background: white;
        z-index: 99;
    }

    .footer{
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23f7f7f7" fill-opacity="1" d="M0,288L60,261.3C120,235,240,181,360,154.7C480,128,600,128,720,149.3C840,171,960,213,1080,224C1200,235,1320,213,1380,202.7L1440,192L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path></svg>');
        background-repeat: no-repeat;
        background-position: top;
        background-color: var(--300);
        padding-top: 20px;

    }

    .footer .footer-subscribe {
        position: relative;
        top: -180px;
        height: 200px;
        background-image:unset !important;
        background-color: transparent !important;
        border-radius: 15px;
        padding: 25px;
    }

    .footer .footer-subscribe .subscribe-input{
        background: var(--100 );
        width: 350px;
        min-width: 350px;
    }

    .about-section{
     margin-bottom: 20px;
    }

    .about-section .enamad-logo{
        margin-top: 10px;
    }


}

@media only screen and (max-width: 400px){

    .heroes-box .heroes-button-box button {
        position: relative;
        top: 15px;
        transition: 0.3s;
        left:-50px;
    }

    .image-box span.badge {
        position: absolute;
        left:-19px;
    }

    .footer .footer-subscribe {
        position: relative;
        top: -180px;
        height: 200px;
        background-image:unset !important;
        background-color: transparent !important;
        border-radius: 15px;
        padding: 10px;
        padding-top: 40px;
    }

    .footer .footer-subscribe .subscribe-input{
        background: var(--100 );
        width: 300px;
        min-width: 300px;
    }
}