. The sibling page research-impact/graphical-abstract.htm carries `research-impact-page` on its but NOT `research-impact`, so nothing here can leak into it (or any other page). RTL: direction comes from . Own rules use logical properties (margin-inline-*, inset-inline-*, text-align: start/end) per CONTEXT.md §RTL architecture. Where an absolutely-positioned element would lose its offset entirely on a browser without logical-property support, the RTL-correct physical value is declared IMMEDIATELY BEFORE the logical one as a fallback (each is tagged "fallback for dir=rtl") — never after it, and never as the only declaration. Bootstrap 3.3.7 only. No row-cols-*, ml-*, me-*, g-* etc. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Section rhythm (matches graphical-abstract.htm) -------------------------------------------------------------------------- */ .research-impact section { padding: 50px 0; } .research-impact section.section-bgcolor { background-color: #fffafb; } .research-impact section.pb-0 { padding-bottom: 0; } .research-impact .mart-0 { margin-top: 0; } @media (min-width: 1100px) { .research-impact .container { max-width: 1080px; } } /* -------------------------------------------------------------------------- 2. Hero / banner (BannerSection + .intro-section) -------------------------------------------------------------------------- */ .research-impact .intro-section { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; overflow: hidden; } /* ---- banner photo, mirrored for RTL ---- images/research-impact/main-banner-research-impact.png (1888x398) puts the two researchers in its RIGHT half and leaves the left half empty, because it was composed for English copy sitting on the left. In Arabic the copy starts on the RIGHT — directly on top of them. No Arabic/RTL variant of the asset exists in the repo, so the layer is flipped horizontally instead: the subject moves to the left, opposite the Arabic text, at full resolution and with no cropping or distortion. The photo carries no legible text or branding, so mirroring it costs nothing. It lives on a ::before layer because `transform` cannot be applied to a background-image on the element itself. If an Arabic-specific banner is supplied later, point this rule at it and delete the transform. */ .research-impact .intro-section::before { content: ""; position: absolute; inset: 0; background-image: url(../images/backgrounds/research-impact-bg.webp); background-repeat: no-repeat; background-size: cover; background-position: center; /* transform: scaleX(-1); */ z-index: 0; } .research-impact .intro-section.translation:before { background-image: url(../images/backgrounds/translation.webp); } /* keep the copy above the banner layer */ .research-impact .intro-section > .container { position: relative; z-index: 1; } .research-impact .intro-section h1 { color: #fff; font-size: 42px; line-height: 54px; font-weight: 700; margin-top: 0; margin-bottom: 20px; } .research-impact .intro-section .description, .research-impact .intro-section .description p { color: #fff; font-size: 20px; line-height: 31px; } .research-impact .intro-section .description ul { padding-inline-start: 0; margin-bottom: 0; list-style: none; } .research-impact .intro-section .description ul li { list-style-type: none !important; background: url(../images/research-impact/greentick.svg) no-repeat; background-position: right 7px; /* The tick is painted on the reading-START edge (right in RTL, and the LTR fallback below moves it to left), so the 25px has to be reserved on that same side. It was on -end, which left a 0px gap on the tick side and put the Arabic text straight on top of the tick, while wasting 25px at the far end. Measured: li 555..1245, text 1105..1245 — no clearance at all. */ padding-inline-start: 25px; padding-inline-end: 0; font-size: 16px; margin-bottom: 16px; } /* LTR fallback (the *_eng.htm includes / an LTR preview of this page) */ html[dir="ltr"] .research-impact .intro-section .description ul li, html:not([dir="rtl"]) .research-impact .intro-section .description ul li { background-position: left 7px; } @media only screen and (max-width: 767px) { .research-impact .intro-section { min-height: auto; padding: 30px 0; } /* phones drop the banner photo entirely (it was background-image:none here before the layer moved to ::before) so the Arabic copy keeps full contrast */ .research-impact .intro-section::before { display: none; } .research-impact .intro-section h1 { font-size: 28px; line-height: 38px; } .research-impact .intro-section .description, .research-impact .intro-section .description p { font-size: 17px; line-height: 27px; } } /* -------------------------------------------------------------------------- 3. "Drive Scientific Progress" — 3 service cards -------------------------------------------------------------------------- */ .research-impact section.research-impact-service-section { padding: 2.25rem 1.5rem; } .research-impact .research-impact-service-section .cards-row { margin-top: 40px; } /* Equal-height cards. Bootstrap 3 floats the columns, so the three cards were as tall as their own content (352 / 322 / 322px) — a ragged bottom edge with the "learn more" links at three different heights. Flex the row instead and let each card fill it; the link is pushed to the bottom below. */ .research-impact .research-impact-service-section .cards-row { display: flex; flex-wrap: wrap; } .research-impact .research-impact-service-section .cards-row > [class*="col-"] { display: flex; float: none; } .research-impact .research-impact-service-section .content-box { display: flex; flex-direction: column; width: 100%; background-color: #fff; background-repeat: no-repeat; background-position: 100% 0; border-radius: 4px; -webkit-box-shadow: #ccc 0 0 10px; box-shadow: #ccc 0 0 10px; padding: 15px 15px ; min-height: 290px; text-align: start; } /* the icon sits in the corner the text flows away from */ html[dir="rtl"] .research-impact .research-impact-service-section .content-box { background-position: 0 0; } /* The decorative icon is a 145x130 background pinned in the corner the text flows away from (top-left in RTL). The heading had no clearance on that side, so the longer Arabic titles ran straight over the artwork — "الرسوم التوضيحية والفيديوهات والتصاميم الجرافيكية" wrapped onto the laptop icon. Shrink the icon a little and reserve its width beside the heading. */ .research-impact .research-impact-service-section .content-box { background-size: 108px auto; } .research-impact .research-impact-service-section .content-box h3 { font-size: 21px; line-height: 1.45; font-weight: bold; margin: 6px 0 14px; color: #000; padding-inline-end: 116px; } /* grow to fill the card so the link below lands on the bottom edge */ .research-impact .research-impact-service-section .content-box .description { flex: 1 1 auto; min-height: 0; padding-top: 0; } /* Tablet: three cards across ~256px columns leaves only ~110px beside the 116px icon reservation, which broke the longest Arabic title onto four lines. Shrink the icon and its gutter here so the heading keeps a usable measure. */ @media only screen and (min-width: 768px) and (max-width: 991px) { .research-impact .research-impact-service-section .content-box { background-size: 74px auto; } .research-impact .research-impact-service-section .content-box h3 { font-size: 18px; padding-inline-end: 82px; } } .research-impact .research-impact-service-section .content-box .cardlink { display: block; margin-top: auto; padding-top: 12px; text-align: start; text-decoration: underline; color: #00f; } @media only screen and (max-width: 767px) { .research-impact section.research-impact-service-section { padding: 2.25rem 0; background: #fff !important; } .research-impact .research-impact-service-section .content-box { min-height: auto; margin-bottom: 20px; padding-bottom: 15px; } .research-impact .research-impact-service-section .content-box .description { min-height: auto; } } /* -------------------------------------------------------------------------- 4. Service tabs (Multimedia Storytelling / Presentation Impact / Maximizing Research Impact) Bootstrap 3 .nav-tabs + .tab-content. Icons come from the shared 600x480 sprite (5 cols x 4 rows of 100x100 tiles, 20px gutters). -------------------------------------------------------------------------- */ .research-impact .nav-tabs { margin-top: 25px; margin-bottom: 20px; border: 0; padding-inline-start: 0; display: flex; flex-wrap: wrap; } .research-impact .nav-tabs > li { width: 20%; float: none; margin-bottom: 0; } .research-impact .posters-presentation-section .nav-tabs > li, .research-impact .research-outreach-section .nav-tabs > li { width: 50%; max-width: 20%; } .research-impact .nav-tabs > li > a { display: block; padding: 105px 17px 0; font-size: 18px; font-weight: 400; color: #000; border: #d3d3d3 1px solid; border-bottom: 0; border-radius: 0; margin: 0; position: relative; text-transform: capitalize; text-align: center; height: 170px; cursor: pointer; background-color: #fff; } .research-impact .nav-tabs > li > a:hover, .research-impact .nav-tabs > li > a:focus, .research-impact .nav-tabs > li.active > a, .research-impact .nav-tabs > li.active > a:hover, .research-impact .nav-tabs > li.active > a:focus { background-color: #d52b1e; color: #fff; border: #d52b1e 1px solid; } .research-impact .nav-tabs > li > a::before { content: ""; display: inline-block; width: 100px; height: 100px; background: url(../images/research-impact/icons_sprites.png) 0 0 no-repeat; position: absolute; top: 10px; right: 25%; /* fallback for dir=rtl */ inset-inline-start: 25%; } /* Multimedia Storytelling */ .research-impact .nav-tabs > li.illust.tab-1 > a::before { background-position: -10px -10px; } .research-impact .nav-tabs > li.illust.tab-1.active > a::before, .research-impact .nav-tabs > li.illust.tab-1 > a:hover::before { background-position: -130px -370px; } .research-impact .nav-tabs > li.illust.tab-2 > a::before { background-position: -490px -10px; } .research-impact .nav-tabs > li.illust.tab-2.active > a::before, .research-impact .nav-tabs > li.illust.tab-2 > a:hover::before { background-position: -250px -370px; } .research-impact .nav-tabs > li.illust.tab-3 > a::before { background-position: -370px -10px; } .research-impact .nav-tabs > li.illust.tab-3.active > a::before, .research-impact .nav-tabs > li.illust.tab-3 > a:hover::before { background-position: -490px -130px; } .research-impact .nav-tabs > li.illust.tab-4 > a::before { background-position: -250px -250px; } .research-impact .nav-tabs > li.illust.tab-4.active > a::before, .research-impact .nav-tabs > li.illust.tab-4 > a:hover::before { background-position: -370px -130px; } .research-impact .nav-tabs > li.illust.tab-5 > a::before { background-position: -10px -130px; } .research-impact .nav-tabs > li.illust.tab-5.active > a::before, .research-impact .nav-tabs > li.illust.tab-5 > a:hover::before { background-position: -250px -130px; } /* Presentation Impact */ .research-impact .nav-tabs > li.posters.tab-1 > a::before { background-position: -130px -130px; } .research-impact .nav-tabs > li.posters.tab-1.active > a::before, .research-impact .nav-tabs > li.posters.tab-1 > a:hover::before { background-position: -130px -250px; } .research-impact .nav-tabs > li.posters.tab-2 > a::before { background-position: -250px -10px; } .research-impact .nav-tabs > li.posters.tab-2.active > a::before, .research-impact .nav-tabs > li.posters.tab-2 > a:hover::before { background-position: -130px -10px; } /* Maximizing Research Impact */ .research-impact .nav-tabs > li.research.tab-1 > a::before { background-position: -370px -370px; } .research-impact .nav-tabs > li.research.tab-1.active > a::before, .research-impact .nav-tabs > li.research.tab-1 > a:hover::before { background-position: -10px -370px; } .research-impact .nav-tabs > li.research.tab-2 > a::before { background-position: -370px -250px; } .research-impact .nav-tabs > li.research.tab-2.active > a::before, .research-impact .nav-tabs > li.research.tab-2 > a:hover::before { background-position: -10px -250px; } /* The reference markup puts the tab list in a bare `col-12` that is a direct child of `.container`, with no `.row` to clear it. Bootstrap 3 floats every `col-*` (and css/arabic-rtl.css re-floats them right), so the float would escape and .tab-content would slide up underneath it. These wrappers are full-width and hold a flex nav, so nothing needs the float. */ .research-impact .illustration-graphic-section > .container > .col-xs-12, .research-impact .posters-presentation-section > .container > .col-xs-12, .research-impact .research-outreach-section > .container > .col-xs-12 { float: none; } /* tab bodies */ .research-impact .tab-content { margin-top: -20px; } .research-impact .tab-content>.tab-pane{ margin-bottom: 20px; } .research-impact .tab-content>.tab-pane { padding: 10px; border: 1px solid #ddd; /* border-top: none; */ } .research-impact .tab-detail-wrap { /* border: 1px solid #ddd; */ padding: 20px; /* margin-bottom: 20px; */ text-align: start; } .research-impact .tab-detail-para { font-size: 16px; line-height: 27px; color: #000; } .research-impact .tab-detail-para p { margin-bottom: 1rem; } .research-impact .tab-detail-para ul { margin-bottom: 1rem; padding-inline-start: 0; } /* .red-sqr (enago-kr.css) draws the red square marker with a physical `left`, which points the wrong way under dir="rtl" — re-lay the markers out logically here instead. */ .research-impact .tab-detail-para ul.no-list { list-style: none; } .research-impact .tab-detail-para ul.no-list > li { position: relative; padding-inline-start: 20px; padding-left: 0; list-style: none; line-height: 20px; margin-bottom: 5px; } .research-impact .tab-detail-para ul.no-list > li::before { position: absolute; content: " "; border: 2px solid #d52b1e; width: 8px; height: 8px; left: auto; right: 0; /* fallback for dir=rtl */ inset-inline-start: 0; top: 9px; } /* "Click here for sample" */ .research-impact .media-link-sample { color: #0d6efd; text-decoration: underline; cursor: pointer; } .research-impact .media-link-sample:hover, .research-impact .media-link-sample:focus { color: #0a58ca; text-decoration: underline; } .research-impact .dis-block { display: block; } /* price strip */ .research-impact .re-custom-flex { display: flex; justify-content: space-between; align-items: center; text-align: start; background: #f2f2f2; padding: 10px; margin-bottom: 20px; border-radius: 5px; } .research-impact .re-custom-flex .pricing-text { /* was flex-basis:75%, which left the fee column ~250px — enough for "$499" but not for "رسوم الخدمة: ٤٩٩ دولارًا أمريكيًا", which then wrapped mid-phrase. Let the intro flex and the fee size to its own content. */ flex: 1 1 auto; font-size: 16px; line-height: 26px; padding-left: 40px; } /* "$499" became "٤٩٩ دولارًا أمريكيًا" (col D carries the currency as a word, so the separate $ glyph span was dropped) — several times longer. Keep it on one line and stop the flex row squeezing it; .pricing-text above now flexes. */ .research-impact .re-custom-flex .pricing-value { white-space: nowrap; flex: 0 0 auto; padding-inline-start: 12px; } .research-impact .re-custom-flex .pricing-value .fee-icon { padding-inline-end: 5px; font-size: 16px; position: relative; color: #4d4d4d; } .research-impact .re-custom-flex .pricing-value .fee-icon img { width: 20px; height: 20px; vertical-align: middle; } .research-impact .re-custom-flex .pricing-value .fee-icon::before { content: ""; position: absolute; height: 40px; width: 1px; display: block; background: linear-gradient(0deg, #f7f1ec, #989898 50%, #f7f1ec); top: -10px; right: -50px; /* fallback for dir=rtl */ inset-inline-start: -50px; } .research-impact .re-custom-flex b { color: #4d4d4d; font-size: 22px; } .research-impact .re-custom-flex .dolor-icon { font-size: 16px; } /* Tablet: five 20% columns leave ~76px of text width once the 37px side padding is taken out, which breaks "Scientific Illustrations" mid-word. Tighten the padding and type instead of letting the label overflow. */ @media only screen and (min-width: 768px) and (max-width: 991px) { .research-impact .nav-tabs > li > a { padding: 100px 8px 0; font-size: 14px; line-height: 20px; } } @media screen and (max-width: 767px) { .research-impact .nav-tabs > li, .research-impact .posters-presentation-section .nav-tabs > li, .research-impact .research-outreach-section .nav-tabs > li { width: 100%; } .research-impact .nav-tabs > li > a { padding: 20px; height: auto; font-size: 14px; border-bottom: 0; } .research-impact .nav-tabs > li:last-child > a { border-bottom: #d3d3d3 1px solid; } .research-impact .nav-tabs > li > a::before { content: none; } .research-impact .tab-content { margin-top: 0; } .research-impact .tab-detail-wrap { padding: 20px 15px; } .research-impact .re-custom-flex { flex-direction: column; justify-content: flex-start; align-items: flex-start; } .research-impact .re-custom-flex .pricing-text { flex-basis: auto; } /* The row is a column at this width, so the fee already has the full line — but nowrap + flex:0 0 auto kept it 257px wide inside a 221px parent at 320px and pushed it past the edge. Let the Arabic price wrap here. */ .research-impact .re-custom-flex .pricing-value { white-space: normal; } .research-impact .re-custom-flex .pricing-value { padding-top: 10px; } .research-impact .re-custom-flex .pricing-value .fee-icon::before { display: none; } } /* -------------------------------------------------------------------------- 5. CTA divisions -------------------------------------------------------------------------- */ .research-impact .cta-section-division { margin: 30px auto 0; width: -webkit-fit-content; width: fit-content; max-width: 100%; } .research-impact .cta-section-division .new_mid_cta { font-size: 22px; } @media only screen and (max-width: 575px) { .research-impact .cta-section-division { width: auto; } .research-impact .cta-section-division .new_mid_cta { display: block; font-size: 18px; padding: 15px 20px; } } /* -------------------------------------------------------------------------- 6. Meet our Experts — editor cards carousel -------------------------------------------------------------------------- */ .research-impact .editorprofiles-section { margin-top: 40px; } .research-impact .editors-carousel { margin-top: 25px; } .research-impact .editors-carousel .nolinkcolor, .research-impact .editors-carousel .nolinkcolor:hover, .research-impact .editors-carousel .nolinkcolor:focus { color: inherit; text-decoration: none; display: block; } .research-impact .editorcard { background-color: #fff; min-height: 325px; padding: 20px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17); border-radius: 4px; text-align: center; transition: all 0.4s ease; cursor: pointer; position: relative; margin-bottom: 4px; } .research-impact .editorcard:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); } .research-impact .editorcard .top-profile-container { display: flex; align-items: flex-start; } .research-impact .editorcard .editorimage { border-radius: 50%; height: 70px; width: 70px; flex: 0 0 70px; } .research-impact .editorcard .education { display: block; min-height: 80px; text-align: start; margin-inline-start: 0.5rem; color: #000; } .research-impact .editorcard .education .mainedu { display: block; font-weight: 500; font-size: 1.25rem; } .research-impact .editorcard .education .edudetail { display: block; font-size: 0.85rem; line-height: 22px; } .research-impact .editorcard .editor-exp { display: block; width: 100%; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 10px 0; margin-bottom: 8px; text-align: start; } .research-impact .editorcard .editor-exp .exp-txt { font-size: 14px; color: #000; } .research-impact .editorcard .editor-exp .exp-txt strong { font-size: 23px; /* the figure is "34+" — digits followed by a bidi-NEUTRAL plus sign, which takes the RTL paragraph direction and jumps to the visual left, rendering as "+34". Isolating the run as LTR keeps the sign after the digits. */ direction: ltr; unicode-bidi: isolate; /* the trailing space inside collapses at the isolation boundary, so the figure would butt against the Arabic label; add the gap in CSS */ margin-inline-end: 6px; } .research-impact .editorcard .areaofexpertise { margin: 0; padding-bottom: 6px; display: block; min-height: 100px; text-align: start; } .research-impact .editorcard .expert-tag { display: block; text-align: start; font-size: 12px; font-weight: 600; color: #777; text-transform: uppercase; margin-bottom: 8px; } .research-impact .editorcard .mainareaofexpertise { display: inline-block; font-size: 10px; padding: 0.4rem 0.5rem; margin: 0.25rem; background-color: #e5e5e5; border-radius: 3px; line-height: 1; text-transform: uppercase; font-weight: 600; text-align: start; color: #000; } /* owl nav — arrows outside the track, mirrored by dir */ .research-impact .editors-carousel .owl-nav { margin-top: 0; } .research-impact .editors-carousel .owl-nav .owl-prev, .research-impact .editors-carousel .owl-nav .owl-next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 36px; height: 36px; line-height: 32px; border-radius: 50%; background: #fff !important; color: #333 !important; border: 1px solid #ddd !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); font-size: 20px !important; margin: 0; padding: 0; } .research-impact .editors-carousel .owl-nav .owl-prev { right: -18px; /* fallback for dir=rtl */ inset-inline-start: -18px; } .research-impact .editors-carousel .owl-nav .owl-next { left: -18px; /* fallback for dir=rtl */ inset-inline-end: -18px; } .research-impact .editors-carousel .owl-dots { margin-top: 12px; } .research-impact .editors-carousel .owl-dots .owl-dot span { background: #d6d6d6; } .research-impact .editors-carousel .owl-dots .owl-dot.active span { background: #d52b1e; } .research-impact .knowmore-link { text-decoration: underline; color: #0d6efd; } .research-impact .view-more-wrap { margin-top: 10px; text-align: end; } @media only screen and (max-width: 767px) { .research-impact .editors-carousel .owl-nav .owl-prev { right: -6px; /* fallback for dir=rtl */ inset-inline-start: -6px; } .research-impact .editors-carousel .owl-nav .owl-next { left: -6px; /* fallback for dir=rtl */ inset-inline-end: -6px; } .research-impact .view-more-wrap { text-align: center; } } /* -------------------------------------------------------------------------- 7. FAQ accordion (Bootstrap 3 panels — same pattern as graphical-abstract.htm, so the two research-impact pages match) -------------------------------------------------------------------------- */ .research-impact .faq-section .cont-head { font-size: 20px; font-weight: bold; color: #000; margin-bottom: 20px; padding-bottom: 8px; } .research-impact #qna-accordion { margin-top: -4px; } .research-impact #qna-accordion p { margin-bottom: 0; } .research-impact #qna-accordion .panel { box-shadow: none; border: 0; border-radius: 0; margin: 0; } .research-impact #qna-accordion .panel-heading { background-color: transparent; padding: 15px 0; border: none; border-top: 1px solid #e8e8e8; border-radius: 0; } .research-impact #qna-accordion .panel-default:first-child .panel-heading { border-top: none; } .research-impact #qna-accordion .panel-title { line-height: 27px; font-size: 16px; } .research-impact #qna-accordion .panel-heading a { color: #000; display: block; font-weight: bold; text-decoration: none; text-align: start; position: relative; padding-inline-end: 35px; } .research-impact #qna-accordion .panel-heading a::after { content: "\f106"; font-weight: bold; position: absolute; /* ONE inset only. Declaring the physical `left` *and* `inset-inline-end` together left this absolutely-positioned box stretched between two insets, so the chevron painted at the reading START (the right edge) rather than at the 10px offset - directly on top of the second word of every Arabic question ("ما |الفرق", "هل |يمكنني"). Confirmed by blanking the content: the headings then render cleanly. inset-inline-end alone puts the chevron at the row reading end (left in RTL, right in LTR); inset-inline-start:auto keeps the box from being stretched across the row. */ inset-inline-start: auto; inset-inline-end: 10px; font-size: 25px; font-family: "FontAwesome"; color: #000; top: 0; } .research-impact #qna-accordion .panel-heading a.collapsed::after { content: "\f107"; } .research-impact #qna-accordion .panel-body { padding: 0 0 20px; border: none; border-radius: 0; background: transparent; text-align: start; font-size: 16px; line-height: 27px; color: #000; } .research-impact #qna-accordion .panel-body a { color: #0d6efd; text-decoration: underline; } /* -------------------------------------------------------------------------- 8. Sample modals (Bootstrap 3 modal + carousel) -------------------------------------------------------------------------- */ .research-impact-sample-modal .modal-dialog { width: 1050px; max-width: 96%; margin: 30px auto; } .research-impact-sample-modal .modal-content { border-radius: 10px; padding: 30px; } .research-impact-sample-modal .modal-body { padding: 0; } .research-impact-sample-modal .close { position: absolute; top: -8px; left: 2px; /* fallback for dir=rtl */ inset-inline-end: 2px; z-index: 20; background: #fff; color: #333; border-radius: 50%; width: 32px; height: 32px; line-height: 30px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); font-size: 22px; opacity: 1; border: none; padding: 0; } .research-impact-sample-modal .close:hover, .research-impact-sample-modal .close:focus { background: #f5f5f5; opacity: 1; } .research-impact-sample-modal .services-slide { text-align: center; } .research-impact-sample-modal .modal-image { max-width: 100%; height: auto; margin: 0 auto; } .research-impact-sample-modal video { width: 100%; height: auto; } /* the sample carousel is a physical slider — pin the track LTR so the Bootstrap 3 slide maths stays correct under dir="rtl" (same approach as css/testimonial-acceptedpaper.css) */ .research-impact-sample-modal .carousel-inner { direction: ltr; } .research-impact-sample-modal .carousel-control { width: 44px; height: 44px; top: 50%; margin-top: -22px; background: rgba(0, 0, 0, 0.45); background-image: none; border-radius: 50%; opacity: 1; text-shadow: none; line-height: 42px; font-size: 24px; } .research-impact-sample-modal .carousel-control.left { left: 8px; } .research-impact-sample-modal .carousel-control.right { right: 8px; } .research-impact-sample-modal .carousel-control:hover, .research-impact-sample-modal .carousel-control:focus { background: rgba(0, 0, 0, 0.7); opacity: 1; } .research-impact-sample-modal .carousel-indicators { bottom: -6px; } .research-impact-sample-modal .carousel-indicators li { border-color: #999; } .research-impact-sample-modal .carousel-indicators .active { background-color: #d52b1e; border-color: #d52b1e; } @media screen and (max-width: 767px) { .research-impact-sample-modal .modal-dialog { width: auto; margin: 10px; } .research-impact-sample-modal .modal-content { padding: 15px; } .research-impact-sample-modal .modal-image { max-height: 60vh; -o-object-fit: contain; object-fit: contain; } } /* -------------------------------------------------------------------------- 9. Overflow guard — nothing on this page may scroll the page sideways -------------------------------------------------------------------------- */ .research-impact img { max-width: 100%; height: auto; } .research-impact .tab-detail-para { overflow-wrap: break-word; word-wrap: break-word; }