/* index.htm page-specific styles
   Extracted from the three inline <style> blocks that used to live in index.htm.
   image url() paths below are relative to this css/ folder (../images/...),
   not to index.htm's root-relative paths. */

/* ---- Formerly the <head> inline <style> block ---- */
.card--head--service {
    font-size: 30px;
    line-height: 33px;
    font-weight: bold;
    margin-top: 0 !important;
    background-image: radial-gradient(#7f7f7f3b, #fff), radial-gradient(#7f7f7f, #fff);
    background-size: 69% 1.5px;
    background-position: -88% 94%;
    background-repeat: no-repeat;
    padding-bottom: 13px;
    margin-bottom: 20px;
}

.hm-s19 .slide-lt.translationslider {
    width: 65%;
}

.hm-s19 .translationslider .carousel-caption-new.slide3 {
    margin-left: 111px;
}

.hm-s19 .translationslider .carousel-caption-new.slide3 h3 {
    line-height: 56px;
    font-size: 48px;
}

.hm-s19 .translationslider .carousel-caption-new.slide3 h3 span {
    background: #fecd03;
    padding: 0px 8px;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    line-height: 1.8;
    color: #000;
}

.hm-s19 .slide-lt.translationslider span.disc-text {
    color: #c4c4c4;
    display: block;
    margin-left: 0%;
    text-align: left;
    font-size: 12px;
    margin-top: 3%;
}

/* .home_slider .conference {
background-image: url(special/images/top_banner.jpg);
background-position: center;
background-size: cover;
    } */

/* .hm-s20.newprice_banner {
    background-image: url(../images/index_v2/slider/spring_banner.jpg);
    } */

.banner--card--price {
    border-radius: 6px;
}

.card--price--strip {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: #d1d1d1;
    color: #000;
    padding: 3px;
}

.card--price--strip--bottom {
    background-color: #d52b1e;
    color: #fff;
    border-radius: 4px;
    display: block;
    font-size: 18px;
    padding: 4px;
}

.price_content {
    padding: 3px !important;
}

.hm-s20.newprice_banner br {
    display: block;
}

.newprice_banner.hm-s20 .carousel-caption-new.slide3 {
    margin-left: 16%;
}

.home-page-new .banner_section .carousel a {
    cursor: pointer;
    display: block;
    padding: 0;
}

.hm-s20.hp-lottery-banner {
    background-image: url(../images/ncd/ncd-bg-hp.jpg);
    background-size: cover;
    background-position-x: center;
}

.hm-s20.hp-chuseok-banner {
    background-image: url(../images/chuseok-banner.jpg);
    background-size: cover;
    background-position-x: center;
}

.hp-chuseok-banner .carousel-caption-new.slide3 {
    text-align: left;
    margin-left: 20%;
    margin-top: 0;
}

.hm-s20.hp-wow-banner {
    background-image: url(../images/save15-banner.jpg);
    background-size: cover;
    background-position-x: center;
}

.hp-lottery-banner .carousel-caption-new.slide3 {
    text-align: left;
    margin-left: 2%;
}

.hp-lottery-banner .carousel-caption-new.slide3 h3 {
    text-align: left;
    color: #fff !important;
    text-shadow: 2px 2px #000;
    font-size: 52px;
    font-weight: 900 !important;
    margin-top: 0 !important;
}

.hp-lottery-banner .carousel-caption-new.slide3 h4 {
    color: #fff;
    font-size: 36px;
    margin-top: 26px;
}

.hp-lottery-banner .carousel-caption-new.slide3 h5 {
    color: #fff;
    font-size: 20px;
    margin-top: 20px;
    line-height: 30px;
}

.hp-lottery-banner .carousel-caption-new.slide3 p {
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
}

.image-box {
    margin-top: 135px;
    text-align: center;
    cursor: pointer;
}

.hp-lottery-banner .carousel-caption-new.slide3 .disc {
    text-align: left;
    margin-left: 8px;
    opacity: 0.9;
}

.hp-lottery-banner .carousel-caption-new.slide3 .disc:hover {
    opacity: 1;
}


.cc {
    padding: 8px 24px;
    border: 2px dotted #bb905e;
    display: inline-block;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer
}

.cc span {
    color: #bb905e;
    font-weight: bold;
    font-weight: 800;
    font-size: 24px;
}

.discount-label {
    padding: 5px 20px;
    -webkit-border-radius: 0 4px 0 4px;
    -moz-border-radius: 0 4px 0 4px;
    border-radius: 0 4px 4px 0;
    margin-top: 0;
    background-color: #ffd013;
    line-height: 18px;
    width: 210px;
    position: relative;
    display: inline-block;
    left: 25px;
    top: -10px;
}

.discount-label:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: rgba(136, 183, 213, 0);
    border-width: 20px;
    top: 0;
    /* margin-top: -20px; */
    border-right-color: #ffd013 !important;
}

.discount-label:before {
    content: "";
    z-index: 2;
    position: absolute;
    top: 42%;
    right: 100%;
    width: 7px;
    height: 7px;
    opacity: 0.95;
    background: #ffffff;
    border-radius: 7px;
    -webkit-box-shadow: inset 0.5px 0 rgba(0, 0, 0, 0.6);
    box-shadow: inset 0.5px 0 rgba(0, 0, 0, 0.6);
}

.discount-label span {
    color: #000000;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    line-height: 28px;
}

.line-height-50 {
    line-height: 50px;
}

.carousel-inner>.item {
    height: 457px;
    background-size: cover;
    background-position: center;
}

/* Initial background color for the whole section */
.slider-section {
    height: 457px;
    position: relative;
    transition: background-color 0.5s ease-in-out;
}

/* Indonesia: on mobile the hero cards are hidden but the slide kept its fixed
   457px desktop height, leaving a big empty pink gap between the CTA and the
   "Kata dari 500+" link below. Let the banner hug its content instead. */
@media (max-width: 991px) {
    .carousel-inner>.item.videohub-slide {
        height: auto;
    }

    .vhub.vh-mini .vh-hero-inner {
        height: auto;
        min-height: 0;
        padding-bottom: 28px;
    }
}

/* Text link styled like enago.com's .knowmore-link ("More Published
   Papers"): blue underlined text, underline drops on hover */
a.knowmore-link {
    color: #0000ff;
    font-size: 16px;
    font-weight: normal;
    text-decoration: underline;
}

a.knowmore-link:hover,
a.knowmore-link:focus {
    color: #0000ff;
    text-decoration: none;
}

/* Custom utility classes for centering */
.vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

h3.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

@media only screen and (max-width: 479px) {
    .newprice_banner.hm-s20 .carousel-caption-new.slide3 {
        padding: 50px 15px 12px 15px;
    }

    .hm-slide-wrap {
        display: block;
        height: 450px;
    }

    .cctie20 {
        margin-top: 38px;
    }

    h4.animated.fadeInDown.mart-0 {
        font-size: 16px;
    }

    a.banner-wide-yellow-cta {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    .hm-s19 .slide-lt.translationslider {
        width: 100%;
    }

    .hp-lottery-banner .carousel-caption-new.slide3 h3 {
        font-size: 44px !important;
        margin-bottom: 10px !important;
        margin-top: 15px !important;
    }

    .hm-s20 .carousel-caption-new.slide3 h4 {
        line-height: 24px;
    }

    .hp-lottery-banner .carousel-caption-new.slide3 p {
        text-align: left;
    }

    .image-box {
        margin-top: -70px;
        text-align: right;
        cursor: pointer;
    }

    .hp-lottery-banner .carousel-caption-new.slide3 .disc {
        text-align: right;
        width: 205px;
    }

    .card--price--strip--bottom {
        font-size: 10px !important;
    }

    .card--price--strip {
        font-size: 8px !important;
    }

    .banner--card {
        margin-top: 20px;
    }

    .newprice_banner {
        line-height: 21px;
    }
}

@media screen and (min-width: 767px) and (max-width: 991px) {
    .card--price--strip--bottom {
        font-size: 12px !important;
    }

    .card--price--strip {
        font-size: 10px !important;
    }

    .banner--card {
        margin-top: 20px;
    }

    .newprice_banner {
        line-height: 21px;
    }

    .banner--card .price_content {
        padding: 3px !important;
    }

    .hm-slide-wrap {
        display: block;
        height: 450px;
    }

    .newprice_banner .carousel-caption-new.slide3 h3 {
        margin-bottom: 12px !important;
        margin-top: 12px !important;
    }

    .hm-slide-wrap .carousel-caption-new {
        width: auto;
    }

    .banner--card {
        display: block;
    }
}

/* Center the loader */
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*temp slider controls*/
.ca-ar-wrap.ar-wrap-nw {
    display: block;
    width: 100%;
}

a.left.carousel-control {
    top: 200px !important;
}

a.right.carousel-control {
    top: 200px !important;
    right: 40px !important;
}


@media only screen and (max-width: 479px) {
    a.left.carousel-control {
        top: 20px !important;
        left: -10%;
    }

    a.right.carousel-control {
        top: 20px !important;
        right: 40px !important;
    }
}

/* Indonesia: Korea-like spacing for the APRAS hero, sized so the whole block (incl. the
   CTA) fits inside the fixed-height (457px) banner. Drop the slide's big top padding and
   vertically center the content to reclaim space. */
.five-per-off-slide.apras {
    padding-top: 38px;
}

.five-per-off-slide.apras .content-wrap {
    align-items: center;
    justify-content: center;
}

.five-per-off-slide.apras .content-wrap .left-cont-wrap {
    max-width: 520px;
}

.five-per-off-slide.apras .content-wrap h2 {
    font-size: 29px;
    line-height: 1.26;
    margin-bottom: 10px;
}

.five-per-off-slide.apras .content-wrap h3 {
    font-size: 19px;
    line-height: 1.35;
    margin-bottom: 6px !important;
}

.five-per-off-slide.apras .content-wrap h4 {
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 14px;
}

.five-per-off-slide.apras .content-wrap .banner-cta {
    font-size: 19px;
}

/* Indonesia: longer ID stat copy was wrapping below the icon (inline-block overflow).
   Force icon-left / text-right flex row so it matches the KR statistics layout. */
.statistics .ststs-box {
    display: flex;
    align-items: center;
}

.statistics .ststs-box .img-box {
    flex: 0 0 auto;
}

.statistics .ststs-box .text-box {
    display: block;
    margin-left: 10px;
}

/* Indonesia: align the 3 editing-service cards (longer ID copy broke KR's fixed min-heights).
   1) Flex row -> all three cards stretch to equal height.
   2) min-heights line up the description + special-pack boxes near the top.
   3) The price card is pinned to the BOTTOM of every card and given an equal height, so the
      "Per kata ..." cards and "Selengkapnya" links line up across all three columns
      regardless of how tall the content above them is.
   Scoped to desktop (3-across); cards stack normally below 992px. */
@media (min-width: 992px) {
    .main-service-box .service-cards-row {
        display: flex;
        flex-wrap: wrap;
    }

    .main-service-box .service-cards-row>.col-md-4 {
        display: flex;
        float: none;
    }

    .main-service-box .service-cards-row .service-box-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .main-service-box .service-cards-row .service-white-wrap {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    .main-service-box .service-cards-row .service-box-wrap .specialtext p {
        min-height: 300px;
    }

    .main-service-box .service-cards-row .service-box-wrap .txt-wrap.specialpacks {
        min-height: 230px;
    }

    .main-service-box .service-cards-row .service-white-wrap .price-text {
        margin-top: auto;
        min-height: 250px;
    }
}

/* Indonesia: make the 4 "why-enago" boxes equal height and align their descriptions.
   Flex row -> equal-height boxes; title min-height makes 1- and 2-line titles take the
   same space so every description starts on the same line. Desktop only (4-across). */
@media (min-width: 768px) {
    .why-enago .row.mart-10 {
        display: flex;
        flex-wrap: wrap;
    }

    .why-enago .row.mart-10>.col-sm-3 {
        display: flex;
        float: none;
    }

    .why-enago .row.mart-10 .why-box {
        width: 100%;
    }

    .why-enago .why-box h3 {
        min-height: 50px;
    }
}

/* Indonesia: remove the white outer box around the editor carousel (keep arrows + cards) */
#editors .tabs-sec .tab-content,
#editors .tab-content {
    background: transparent !important;
    padding: 0 !important;
    filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

#editors .tab-content>.tab-pane {
    border: none !important;
    padding: 0 !important;
}

/* editor-profiles pager styles moved to css/editor-profiles.css */

/* Indonesia: drop the editor block's redundant 50px top margin (it now sits at the top
   of the section, so it stacked on the section's own top padding = too big a gap) */
#editors.mart-50 {
    margin-top: 0 !important;
}

/* Indonesia: gap between editor profiles and the accepted-papers/testimonials section */
.home.accepted-testimonials .id-makalah-gap {
    margin-top: 80px !important;
    margin-bottom: 0 !important;
}

/* Indonesia: fix editor profile flag cutting off */
.editor-profiles .item .editor-exp {
    justify-content: flex-start !important;
}

/* Indonesia: "Didampingi Kapan Pun" boxes on mobile (stacked below 992px).
   The sprite icons are absolutely positioned against the Bootstrap column, whose
   border edge sits at the viewport edge on mobile — icons were cut off screen.
   Anchor them to the box itself instead. Also drop the desktop-only column
   divider border and the 145px heading min-height (equal-height aid for the
   3-across layout) — both inline styles, hence the !important. */
@media (max-width: 991px) {
    .security_section .security_section_inner {
        position: relative;
        padding-left: 70px;
        border-right: none !important;
        margin-right: 0 !important;
    }

    .security_section .subject_area_sprite.robust_data:before,
    .security_section .subject_area_sprite.availability:before,
    .security_section .subject_area_sprite.payment_card:before {
        left: 0;
    }

    .security_section .security_section_inner h3 {
        min-height: 0 !important;
        margin-bottom: 10px;
    }

    .security_section .security_section_inner {
        margin-bottom: 25px;
    }
}

/* Indonesia: center the "Kemitraan Enago" card text on mobile. The card keeps its
   desktop right padding (space for the person illustration) on tablet widths, which
   squeezes the copy into a narrow left column — reset it and center everything. */
@media (max-width: 767px) {
    .publisher_partner_inner.university_partner {
        padding: 25px 20px;
        text-align: center;
    }

    .publisher_partner_inner.university_partner h3,
    .publisher_partner_inner.university_partner .lv2 {
        text-align: center !important;
    }

    .publisher_partner_inner.university_partner .arrow_link {
        display: inline-block;
    }
}

/* struck-through "old price" in the service-card price rows — same look as
   .editing-content .old on the service pages (services.css) */
.ec-price-block .old {
    color: #2b2b2b;
    text-decoration: line-through;
    text-decoration-color: #D52B1E;
    text-decoration-thickness: 2px;
    margin-right: 8px;
    font-size: 18px;
    font-weight: 700;
}

/* ---- Formerly the inline <style> block after .brand-marquee section ---- */
/* Brand / Partner Logo Marquee -- continuous infinite auto-scroll (Section: Logos) */
.brand-marquee {
       direction: rtl;
    padding: 24px 0 28px;
    background: #F4ECE6;
    overflow: hidden;
}

.brand-marquee__label {
    margin: 0 0 22px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #8a8a8a;
}

.brand-marquee__viewport {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.brand-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: brand-marquee-scroll 32s linear infinite reverse;
}

.brand-marquee:hover .brand-marquee__track {
    animation-play-state: paused;
}

.brand-marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brand-marquee__group li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 60px;
    margin: 0 28px;
}

.brand-marquee__group li img {
    display: block;
    width: auto;
    height: auto;
    max-height: 40px;
    max-width: 160px;
}

@keyframes brand-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-marquee__track {
        animation: none;
    }

    .brand-marquee__viewport {
        overflow-x: auto;
    }
}

@media only screen and (max-width: 767px) {
    .brand-marquee__group li {
        height: 44px;
        margin: 0 18px;
    }

    .brand-marquee__group li img {
        max-height: 30px;
        max-width: 110px;
    }
}

/* ---- Copied from css/foruniversity.css (.fu-marquee logo marquee) ---- */
/* Trusted-partner logo marquee (right to left) */
.fu-marquee {
    overflow: hidden;
    width: 100%;
    direction: rtl;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.fu-marquee-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Duplicate logo set is kept in the DOM only for the (now-disabled) seamless
   loop and is no longer rendered. */
.fu-marquee-set[aria-hidden="true"] {
    display: none;
}

.fu-marquee-track .fu-logo {
    flex: 0 0 auto;
    height: 60px;
    padding: 0 15px;
    display: flex;
    align-items: center;
}

.fu-marquee-track .fu-logo img {
    height: 40px;
    width: auto;
    max-width: 206px;
    display: block;
}

/* ---- Formerly the inline <style> block inside .main-service-box (services overview cards) ---- */
/* Services Overview (Section 6) -- 6 clickable service cards */
.services-overview-row {
    margin-top: 40px;
}

.services-overview-col {
    display: flex;
    margin-bottom: 30px;
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 36px 30px 30px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    text-align: right;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    min-height: 370px;
}

.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: #d52b1e;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s ease;
}

.service-card:hover,
.service-card:focus {
    transform: translateY(-8px);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .12);
    border-color: #f2c9c6;
    color: inherit;
    text-decoration: none;
}

.service-card:hover::before,
.service-card:focus::before {
    transform: scaleX(1);
}

.service-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 50%;
    /* background: #fbeae9;
    color: #d52b1e;
    font-size: 24px; */
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
    margin-right:10px;
}
.service-card-icon img {
    width: 120%;
    height: auto;
}
.service-card:hover .service-card-icon,
.service-card:focus .service-card-icon {
    /* baurl(http://localhost/enago-saudi/top-journal-scientific-editing.htm)ckground: #d52b1e;
    color: #fff; */
    transform: scale(1.1);
}

.service-card-title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 700;
    color: #000;
}

.service-card-desc {
    flex-grow: 1;
    margin-bottom: 22px;
    font-size: 15px;
    line-height: 25px;
    color: #5a5a5a;
}

.service-card-more {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: #00f;
}

.service-card-more i {
    margin-right: 8px;
    transition: transform .3s ease;
}
.service-card-more.badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 22px;
    font-size: 12px;
    font-weight: 700;
    color: #1c8a4b;
    background: #e6f4ea;
    border: 1px solid #bfe3cc;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
    animation: badge-pulse-glow 2s ease-in-out infinite;
}

.service-card-more.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1c8a4b;
    animation: badge-dot-blink 1.4s ease-in-out infinite;
}

@keyframes badge-pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(28, 138, 75, .45));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(28, 138, 75, 0));
    }
}

@keyframes badge-dot-blink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .3;
        transform: scale(.7);
    }
}

.service-card-more.badge-shimmer {
    color: #fff;
    background: linear-gradient(90deg, #1c8a4b, #6fcf87, #1c8a4b);
    background-size: 200% 100%;
    border-color: transparent;
    animation: badge-shimmer-move 2.5s linear infinite;
}

.service-card-more.badge-shimmer::before {
    display: none;
}

@keyframes badge-shimmer-move {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

.service-card:hover .service-card-more i,
.service-card:focus .service-card-more i {
    transform: translateX(-6px);
}

@media only screen and (max-width: 767px) {
    .services-overview-row {
        margin-top: 25px;
    }

    .service-card {
        padding: 28px 24px 24px;
    }
}
