/* ==========================================================================
Elementor Compatibility Styles
========================================================================== */
/* Remove extra padding from Elementor pages */
.elementor-page .site-content,
.page-full-width .site-content {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Override Elementor default section padding on small screens */
.elementor-section.elementor-section-boxed > .elementor-container {
max-width: var(--container-xl);
}
/* Ensure Elementor Pro header/footer fills correctly */
body:not(.elementor-editor-active) .elementor-location-header {
position: sticky;
top: 0;
z-index: 1000;
}
body.admin-bar:not(.elementor-editor-active) .elementor-location-header {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar:not(.elementor-editor-active) .elementor-location-header {
top: 46px;
}
}
/* Prevent Elementor popup z-index conflicts */
.elementor-popup-modal {
z-index: 9999;
}
/* Elementor editor preview paddings */
.elementor-editor-active .site-header {
position: relative !important;
}
/* Brand color variables passed to Elementor */
:root {
--e-global-color-primary: var(--color-primary);
--e-global-color-secondary: var(--color-secondary);
--e-global-color-text: var(--color-text);
--e-global-color-accent: var(--color-dark);
}
/* Elementor Typography overrides to use theme fonts */
.elementor-widget-heading .elementor-heading-title {
font-family: var(--font-heading);
}
.elementor-widget-text-editor {
font-family: var(--font-primary);
}
/* Fix Elementor button style collisions */
.elementor-button {
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
}
/* Elementor Flexbox container compat */
.elementor-container.e-con-boxed {
max-width: var(--container-xl);
}
/* Canvas template: no site chrome */
.elementor-template-canvas .site-header,
.elementor-template-canvas .site-footer {
display: none;
}
/* Prevent flash of unstyled content in Elementor preview */
.elementor-invisible {
visibility: hidden;
}
/* ==========================================================================
Arrow for .head-section-btn buttons (Elementor)
The arrow uses currentColor, so it automatically matches each button's
text colour (white on the orange button, dark/orange on the outline one).
========================================================================== */
/* Keep text + arrow on one line, neatly spaced */
.head-section-btn .elementor-button-content-wrapper {
display : inline-flex;
align-items: center;
gap : 10px;
}
/* Smooth transition on the button element */
.head-section-btn .elementor-button {
transition : transform 250ms ease, box-shadow 250ms ease,
background-color 250ms ease, color 250ms ease,
border-color 250ms ease !important;
}
/* Filled orange button hover — lift + shadow + slight darken */
.head-section-btn:hover .elementor-button {
transform : translateY(-3px);
box-shadow : 0 8px 24px rgba(0, 0, 0, 0.22) !important;
filter : brightness(0.90);
}
/* Outline button hover — fill with orange, flip text/arrow to white.
Assign class outline-btn to the outline button widget in Elementor. */
.head-section-btn.outline-btn:hover .elementor-button {
background-color : #e8742c !important;
border-color : #e8742c !important;
color : #ffffff !important;
filter : none;
}
.head-section-btn.outline-btn:hover .elementor-button-text {
color: #ffffff !important;
}
.head-section-btn.outline-btn:hover .elementor-button-text::after {
background-color: #ffffff !important;
}
/* The arrow itself — a long SVG drawn with a mask so it inherits currentColor */
.head-section-btn .elementor-button-text::after {
content : "";
display : inline-block;
width : 40px; /* wider / longer arrow */
height : 16px;
margin-left : 10px;
background-color: currentColor;
flex-shrink : 0;
transition : transform 250ms ease, background-color 250ms ease;
-webkit-mask : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='8' x2='42' y2='8'/%3E%3Cpolyline points='34 1 42 8 34 15'/%3E%3C/svg%3E") no-repeat center / contain;
mask : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='8' x2='42' y2='8'/%3E%3Cpolyline points='34 1 42 8 34 15'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Arrow slides right on hover */
.head-section-btn:hover .elementor-button-text::after {
transform: translateX(5px);
}
/* "Join as a Guest" (outline) button → orange arrow (text stays black).
Add the class guest-btn to that button in Elementor. */
.guest-btn .elementor-button-text::after,
.elementor-button.guest-btn .elementor-button-text::after {
background-color: #e8742c !important;
}
/* ==========================================================================
Count / Stats section (Elementor)
========================================================================== */
/* White fading line below each individual count block */
.main-count-sub-section {
position : relative;
padding-bottom: 24px;
margin-bottom : 24px;
}
.main-count-sub-section::after {
content : "";
position : absolute;
left : 0;
bottom : -10px;
width : 100%;
height : 1px;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.15) 60%,
rgba(255, 255, 255, 0) 100%
);
}
/* No divider line under the last count block */
.main-count-sub-section:last-child::after {
display: none;
}
/* Orange vertical line down the left of the whole stats block.
Parent MUST be positioned so the ::before anchors to it.
!important is required to beat Elementor's later-loading CSS. */
/* .main-count-section {
position: relative !important;
} */
.main-count-section::before {
content : "" !important;
display : block !important;
position : absolute !important;
left : 30px !important;
top : 10px !important;
width : 3px !important;
height : 100% !important;
background : #e8742c !important;
border-radius: 5px !important;
z-index : 5 !important; /* above Elementor bg / overlay */
pointer-events: none;
}
/* ==========================================================================
Star points row (.section-star-home)
Single horizontal row — all items side by side, evenly distributed.
========================================================================== */
.section-star-home {
display : flex !important;
flex-direction : row !important;
flex-wrap : nowrap !important;
align-items : center !important;
justify-content : space-evenly !important;
gap : 0 !important;
}
/* Each item: text + star icon in a horizontal line */
.section-star-home > .e-con {
display : flex !important;
flex-direction : row !important;
flex-wrap : nowrap !important;
align-items : center !important;
justify-content : center !important;
gap : 12px !important;
flex : 0 0 auto !important;
width : auto !important;
max-width : none !important;
}
/* Laptop narrow (1025-1290px): allow wrapping so items don't overflow */
@media (min-width: 1025px) and (max-width: 1290px) {
.section-star-home {
flex-wrap : wrap !important;
justify-content : center !important;
gap : 10px 20px !important;
}
.section-star-home > .e-con {
flex : 0 0 auto !important;
max-width : none !important;
}
}
/* Tablet (<=1024px) — allow wrapping */
@media (max-width: 1024px) {
.section-star-home {
flex-wrap : wrap !important;
justify-content : center !important;
gap : 16px 32px !important;
}
.section-star-home > .e-con {
flex : 0 0 auto !important;
max-width : none !important;
}
}
/* Mobile — stack vertically, centred */
@media (max-width: 600px) {
.section-star-home {
flex-direction : column !important;
align-items : center !important;
gap : 14px !important;
}
}
/* ==========================================================================
Story gallery (.story-section-div)
• Large desktop (>=1441px): full-bleed concave 3D arc, 6 panels in a row
• Laptop (1025-1440px): flat grid, 3 per row
• Tablet (768-1024px): flat grid, 2 per row
• Mobile (<=767px): 1 per row, stacked
========================================================================== */
/* Full-bleed: stretch to the full viewport width, reliably centred even
inside Elementor's boxed / max-width:1600px body. */
.story-section-div {
width : 100vw !important;
max-width : 100vw !important;
position : relative;
left : 50%;
transform : translateX(-50%);
}
/* Remove every inner max-width cap so the row truly fills the width */
.story-section-div > .e-con,
.story-section-div .e-con-boxed,
.story-section-div .e-con-inner {
max-width: 100% !important;
width : 100% !important;
}
/* Flex container (base — applies to every breakpoint) */
.story-section-div .e-con-inner {
display : flex !important;
flex-wrap : wrap !important;
justify-content: center !important;
align-items : center !important;
gap : 14px !important;
/* padding : 30px clamp(12px, 3vw, 50px) !important; */
padding: 0 !important;
box-sizing : border-box;
}
/* Base panel — ALWAYS has a width + height so the image can never collapse */
.story-section-1,
.story-section-2,
.story-section-3,
.story-section-4,
.story-section-5,
.story-section-6 {
flex : 1 1 0 !important;
min-width : 0 !important;
height : 480px !important; /* fallback height */
min-height : 480px !important; /* beat Elementor .e-con */
background-size : cover !important;
background-position: center !important;
background-repeat : no-repeat !important;
border-radius : 6px;
overflow : hidden;
box-shadow : 0 24px 45px rgba(0, 0, 0, 0.22);
backface-visibility: hidden;
transition : transform 450ms ease, box-shadow 450ms ease;
will-change : transform;
}
/* Safety net: if the image is an ![]()
INSIDE the panel (image widget),
make it fill the panel instead of a CSS background. */
.story-section-1 img,
.story-section-2 img,
.story-section-3 img,
.story-section-4 img,
.story-section-5 img,
.story-section-6 img,
.story-section-1 .elementor-widget-image,
.story-section-2 .elementor-widget-image,
.story-section-3 .elementor-widget-image,
.story-section-4 .elementor-widget-image,
.story-section-5 .elementor-widget-image,
.story-section-6 .elementor-widget-image {
width : 100% !important;
height : 100% !important;
object-fit: cover !important;
display : block !important;
}
/* ── LARGE DESKTOP (>=1441px): full-width concave 3D arc ──────────────────── */
@media (min-width: 1441px) {
.story-section-div .e-con-inner {
flex-wrap : nowrap !important;
align-items : center !important; /* symmetric centred arc */
gap : 10px !important;
perspective : 1700px; /* stronger, image-like depth */
perspective-origin: 50% 50%;
transform-style : preserve-3d;
padding : 60px 0 !important; /* room for shadows top/bottom */
}
/* Outer panels wider, centre panels narrower (matches the reference) */
.story-section-1, .story-section-6 { flex: 1.5 1 0 !important; }
.story-section-2, .story-section-5 { flex: 1.15 1 0 !important; }
.story-section-3, .story-section-4 { flex: 0.95 1 0 !important; }
/* Arc: rotateY angles + graduated heights — tallest at the edges so the
top edges flow into one continuous slanting line. */
.story-section-1 { transform: rotateY(42deg) !important; height: 540px !important; min-height: 540px !important; transform-origin: right center; }
.story-section-2 { transform: rotateY(25deg) !important; height: 430px !important; min-height: 430px !important; transform-origin: right center; }
.story-section-3 { transform: rotateY(8deg) !important; height: 370px !important; min-height: 370px !important; transform-origin: right center; }
.story-section-4 { transform: rotateY(-8deg) !important; height: 370px !important; min-height: 370px !important; transform-origin: left center; }
.story-section-5 { transform: rotateY(-25deg) !important; height: 430px !important; min-height: 430px !important; transform-origin: left center; }
.story-section-6 { transform: rotateY(-42deg) !important; height: 540px !important; min-height: 540px !important; transform-origin: left center; }
/* hover — straighten & lift */
.story-section-1:hover, .story-section-2:hover, .story-section-3:hover,
.story-section-4:hover, .story-section-5:hover, .story-section-6:hover {
transform : rotateY(0deg) scale(1.04) !important;
box-shadow: 0 30px 55px rgba(0, 0, 0, 0.32);
z-index : 5;
}
}
/* ── LAPTOP (1025-1440px): flat grid, 3 per row ───────────────────────────── */
@media (min-width: 1025px) and (max-width: 1440px) {
.story-section-1, .story-section-2, .story-section-3,
.story-section-4, .story-section-5, .story-section-6 {
flex : 0 0 calc((100% - (2 * 14px)) / 3) !important;
max-width : calc((100% - (2 * 14px)) / 3) !important;
height : 460px !important;
min-height: 460px !important;
transform : none !important;
}
}
/* ── TABLET (768-1024px): flat grid, 2 per row ────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
.story-section-1, .story-section-2, .story-section-3,
.story-section-4, .story-section-5, .story-section-6 {
flex : 0 0 calc((100% - 14px) / 2) !important;
max-width : calc((100% - 14px) / 2) !important;
height : 420px !important;
min-height: 420px !important;
transform : none !important;
}
}
/* ── MOBILE (<=767px): 1 per row, stacked ─────────────────────────────────── */
@media (max-width: 767px) {
.story-section-div .e-con-inner {
gap: 20px !important;
}
.story-section-1, .story-section-2, .story-section-3,
.story-section-4, .story-section-5, .story-section-6 {
flex : 0 0 100% !important;
max-width : 100% !important;
height : 440px !important;
min-height: 440px !important;
transform : none !important;
}
}
/* ==========================================================================
Narrow laptop (1024px – 1100px)
========================================================================== */
@media (min-width: 1024px) and (max-width: 1100px) {
/* Hero section — force horizontal layout */
.home-hero-section {
flex-direction : row !important;
}
/* Global Indian heading — scale down from 100px to 80px */
.home-global-indian,
.home-global-indian span {
font-size : 80px !important;
line-height : 80px !important;
}
}
.what-is-indianness-section-parent {
position: relative;
}
.what-is-indianness-section {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 767px) {
.our-community-btn {
position: absolute !important;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
}
}
@media (min-width: 1024px) and (max-width: 1200px) {
.faq-hero-section {
height: 80vh !important;
}
}
/* ==========================================================================
Connect with Indianness — Contact Form (.connect-with-indianness)
========================================================================== */
.connect-with-indianness {
width : 100%;
}
/* ── 2-column grid ── */
.connect-with-indianness .form-grid {
display : grid;
grid-template-columns : 1fr 1fr;
column-gap : 40px;
row-gap : 24px;
margin-bottom : 32px;
}
/* ── Each label + field group ── */
.connect-with-indianness .form-group {
display : flex;
flex-direction : column;
gap : 8px;
}
/* ── Labels ── */
.connect-with-indianness .form-group label {
font-family : "Poppins", sans-serif;
font-size : 16px;
font-weight : 500;
line-height : 1.4;
color : #000000;
display : block;
margin : 0;
margin-bottom: 10px;
}
/* ── Text / email / URL inputs ── */
.connect-with-indianness .form-group input[type="text"],
.connect-with-indianness .form-group input[type="email"],
.connect-with-indianness .form-group input[type="url"] {
width : 100%;
height : 52px;
padding : 0 16px;
background : #ffffff;
border : 1px solid #e0e0e0;
border-radius : 8px;
font-family : "Poppins", sans-serif;
font-size : 14px;
font-weight : 300;
color : #000000;
outline : none;
box-shadow : none;
-webkit-appearance : none;
appearance : none;
transition : border-color 200ms ease, box-shadow 200ms ease;
}
.connect-with-indianness .form-group input[type="text"]:focus,
.connect-with-indianness .form-group input[type="email"]:focus,
.connect-with-indianness .form-group input[type="url"]:focus {
border-color : #204731;
box-shadow : 0 0 0 3px rgba(32, 71, 49, 0.10);
}
.connect-with-indianness .form-group input::placeholder {
color : #aaaaaa;
font-weight : 300;
}
/* ── Select dropdowns ── */
.connect-with-indianness .form-group select {
width : 100%;
height : 52px;
padding : 0 44px 0 16px;
background-color : #ffffff;
background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat : no-repeat;
background-position : right 16px center;
background-size : 18px;
border : 1px solid #e0e0e0;
border-radius : 8px;
font-family : "Poppins", sans-serif;
font-size : 14px;
font-weight : 300;
color : #000000;
outline : none;
cursor : pointer;
-webkit-appearance : none;
appearance : none;
transition : border-color 200ms ease, box-shadow 200ms ease;
}
.connect-with-indianness .form-group select:focus {
border-color : #204731;
box-shadow : 0 0 0 3px rgba(32, 71, 49, 0.10);
}
/* Grey placeholder text for default empty option */
.connect-with-indianness .form-group select option[value=""] {
color : #aaaaaa;
}
/* ── Checkbox row ── */
.connect-with-indianness .form-checkbox {
margin-bottom : 36px;
}
.connect-with-indianness .form-checkbox > label {
display : flex;
align-items : flex-start;
gap : 12px;
cursor : pointer;
font-family : "Poppins", sans-serif;
font-size : 15px;
font-weight : 500;
color : #000000;
line-height : 1.5;
margin-bottom : 12px;
}
.connect-with-indianness .form-checkbox input[type="checkbox"] {
flex-shrink : 0;
width : 22px;
height : 22px;
min-width : 22px;
margin-top : 2px;
accent-color : #204731;
cursor : pointer;
border-radius : 4px;
}
.connect-with-indianness .form-note {
font-family : "Poppins", sans-serif;
font-size : 13px;
font-weight : 300;
color : #555555;
line-height : 1.6;
margin : 0;
font-style : italic;
}
/* ── Submit button wrapper — centred ── */
.connect-with-indianness .cf7-submit-wrap {
display : flex;
justify-content : center;
margin-top : 0;
}
/* CF7 renders [submit] as */
.connect-with-indianness .cf7-submit-wrap .wpcf7-submit,
.connect-with-indianness .cf7-submit-wrap input[type="submit"],
.connect-with-indianness .cf7-submit-wrap button[type="submit"] {
display : inline-block;
background-color : #f7831d;
background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='8' x2='42' y2='8'/%3E%3Cpolyline points='34 1 42 8 34 15'/%3E%3C/svg%3E");
background-repeat : no-repeat;
background-position : right 24px center;
background-size : 36px 14px;
color : #ffffff;
font-family : "Poppins", sans-serif;
font-size : 18px;
font-weight : 500;
line-height : 1;
padding : 18px 72px 18px 40px;
border : none;
border-radius : 6px;
cursor : pointer;
-webkit-appearance : none;
appearance : none;
transition : background-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}
.connect-with-indianness .cf7-submit-wrap .wpcf7-submit:hover,
.connect-with-indianness .cf7-submit-wrap input[type="submit"]:hover,
.connect-with-indianness .cf7-submit-wrap button[type="submit"]:hover {
background-color : #e06d10;
transform : translateY(-2px);
box-shadow : 0 6px 20px rgba(247, 131, 29, 0.35);
}
/* ── Responsive ── */
@media (max-width: 767px) {
.connect-with-indianness .form-grid {
grid-template-columns : 1fr;
column-gap : 0;
row-gap : 20px;
}
.connect-with-indianness .form-group input[type="text"],
.connect-with-indianness .form-group input[type="email"],
.connect-with-indianness .form-group input[type="url"],
.connect-with-indianness .form-group select {
height : 48px;
}
.connect-with-indianness .cf7-submit-wrap .wpcf7-submit,
.connect-with-indianness .cf7-submit-wrap input[type="submit"],
.connect-with-indianness .cf7-submit-wrap button[type="submit"] {
font-size : 16px;
padding : 16px 60px 16px 32px;
}
}
.connect-with-indianness p {
margin: 0 !important;
}
label.term-condition-checkbox {
display : flex;
align-items : center;
gap : 10px;
margin : 0;
}
label.term-condition-checkbox label {
display : flex;
align-items : center;
gap : 10px;
}
label.term-condition-checkbox span.wpcf7-list-item {
margin : 0;
}
label.term-condition-checkbox span {
font-size : 14px;
line-height : 26px;
color : #000000;
font-weight : 400;
}
/* ==========================================================================
Connect with Indianness form
========================================================================== */
.connect-with-indianness .form-note {
opacity : 0.5;
font-size : 12px;
color : #000000;
font-weight : 300;
}
.connect-with-indianness .form-group label {
font-size : 14px;
line-height : 26px;
color : #000000;
font-weight : 400;
}
.connect-with-indianness .form-group input[type="text"],
.connect-with-indianness .form-group input[type="email"],
.connect-with-indianness .form-group input[type="url"] {
opacity : 0.5;
font-size : 12px;
color : #000000;
font-weight : 300;
}
.connect-with-indianness .form-group select {
opacity : 0.5;
font-size : 12px;
color : #000000;
font-weight : 300;
}
.head-section-btn.contact-form-btn input[type="submit"] {
font-size : 20px;
color : #ffffff;
font-weight : 500;
line-height : 0;
text-align : center;
}
/* ==========================================================================
Contact Form 7 — validation & response messages
========================================================================== */
.wpcf7-not-valid-tip {
color : #dc3232;
font-size : 14px;
font-weight : normal;
display : block;
margin-top : 5px;
}
.wpcf7 form .wpcf7-response-output {
margin : 2em 0.5em 1em;
padding : 0.2em 1em;
border : 2px solid #00a0d2;
font-size : 15px;
}
a.mail-to-contact {
margin-top: 10px;
display: block;
color: #000000;
word-break: break-all;
}
/* ==========================================================================
FAQ section — mobile full-width fix
========================================================================== */
@media (max-width: 767px) {
.faq-everything-section {
width : 100% !important;
max-width: 100% !important;
}
}
/* ==========================================================================
Contact Get-in-Touch cards
≥ 1200px : 4 columns, single row, text contained
768–1199px: 2 columns, 2 rows
≤ 767px : 1 column, stacked
========================================================================== */
/* ── ≥ 1200px: 4 columns in one row, title + email on the same line ── */
@media (min-width: 1200px) {
/* Outer row: no wrapping */
.contact-get-in-touch {
flex-wrap : nowrap !important;
}
/* Each card: grow equally, don't overflow */
.contact-get-in-touch > .e-con {
flex : 1 1 0 !important;
width : 0 !important;
max-width : none !important;
min-width : 0 !important;
overflow : hidden !important;
}
.contact-get-in-touch > .elementor-column {
flex : 1 1 0 !important;
width : 25% !important;
max-width : 25% !important;
min-width : 0 !important;
overflow : hidden !important;
}
/* Card inner content → horizontal: title on left, email on right */
.contact-get-in-touch > .e-con > .e-con-inner,
.contact-get-in-touch > .elementor-column > .elementor-widget-wrap {
display : flex !important;
flex-direction : row !important;
align-items : center !important;
flex-wrap : nowrap !important;
gap : 12px !important;
}
/* Hide the short orange divider line — doesn't suit horizontal layout */
.contact-get-in-touch .elementor-widget-divider {
display : none !important;
}
/* Title widget: shrink to its content, clip with ellipsis if still too long */
.contact-get-in-touch .elementor-widget-heading {
flex : 0 1 auto !important;
min-width : 0 !important;
overflow : hidden !important;
}
.contact-get-in-touch .elementor-heading-title {
font-size : clamp(14px, 1.15vw, 20px) !important;
white-space : nowrap !important;
overflow : hidden !important;
text-overflow : ellipsis !important;
line-height : 1.3 !important;
margin : 0 !important;
}
/* Email / text widget: take remaining space, break long addresses */
.contact-get-in-touch .elementor-widget-text-editor {
flex : 1 1 auto !important;
min-width : 0 !important;
text-align: right !important;
}
.contact-get-in-touch .elementor-widget-text-editor p,
.contact-get-in-touch .elementor-widget-text-editor a,
.contact-get-in-touch a.mail-to-contact {
overflow-wrap : break-word !important;
word-break : break-all !important;
white-space : normal !important;
min-width : 0 !important;
margin : 10px 0 0 0 !important;
}
}
/* ── 768px – 1199px: 2 columns, 2 rows ── */
@media (min-width: 768px) and (max-width: 1199px) {
.contact-get-in-touch {
flex-wrap : wrap !important;
}
.contact-get-in-touch > .e-con {
width : calc(50% - 12px) !important;
max-width : calc(50% - 12px) !important;
flex : 0 0 calc(50% - 12px) !important;
min-width : 0 !important;
overflow : hidden !important;
}
.contact-get-in-touch > .elementor-column {
width : 50% !important;
max-width : 50% !important;
flex : 0 0 50% !important;
min-width : 0 !important;
overflow : hidden !important;
}
}
a.mail-to-contact:hover {
color: #39af4a;
}
/* ==========================================================================
Article / Press Release tab-controlled footer sections
Default: press-release footer hidden, article footer visible.
JS adds .aprl-pr-active to when the Press Release tab is selected.
!important beats both Elementor's flex and jQuery inline display values.
========================================================================== */
.press-release-footer-section {
display : none !important;
}
/* Press Release tab active → swap visibility */
body.aprl-pr-active .press-release-footer-section {
display : block !important;
}
body.aprl-pr-active .article-footer-section {
display : none !important;
}
/* ==========================================================================
Press Release page (page-id-23) — Footer contact cards
Ratio: card-1 (1fr) | card-2 (1fr) | card-3 (2fr)
Overrides the generic .contact-get-in-touch rules for this specific page.
========================================================================== */
/* ── Always: keep inner card content vertical (undo generic horizontal rule) ── */
.page-id-23 .press-release-footer-section .contact-get-in-touch > .e-con > .e-con-inner,
.page-id-23 .press-release-footer-section .contact-get-in-touch > .elementor-column > .elementor-widget-wrap {
display : flex !important;
flex-direction : column !important;
align-items : flex-start !important;
justify-content: flex-start !important;
}
/* Restore divider visibility (generic ≥1200px rule hides it) */
.page-id-23 .press-release-footer-section .contact-get-in-touch .elementor-widget-divider {
display : block !important;
width : 100% !important;
}
/* Heading titles stay left-aligned, normal wrapping */
.page-id-23 .press-release-footer-section .contact-get-in-touch .elementor-heading-title {
white-space : normal !important;
overflow : visible !important;
text-overflow : unset !important;
font-size : inherit !important;
}
/* ── Desktop (≥ 1024px): 1 : 1 : 2 single row ── */
@media (min-width: 1024px) {
.page-id-23 .press-release-footer-section .contact-get-in-touch {
display : flex !important;
flex-direction : row !important;
flex-wrap : nowrap !important;
align-items : stretch !important;
}
/* Cards 1 & 2 — each takes 1 flex unit */
.page-id-23 .press-release-footer-section .contact-get-in-touch > .e-con:nth-child(1),
.page-id-23 .press-release-footer-section .contact-get-in-touch > .e-con:nth-child(2),
.page-id-23 .press-release-footer-section .contact-get-in-touch > .elementor-column:nth-child(1),
.page-id-23 .press-release-footer-section .contact-get-in-touch > .elementor-column:nth-child(2) {
flex : 1 1 0 !important;
width : 0 !important;
max-width : none !important;
min-width : 0 !important;
overflow : visible !important;
}
/* Card 3 — takes 2 flex units (= combined width of cards 1 & 2) */
.page-id-23 .press-release-footer-section .contact-get-in-touch > .e-con:nth-child(3),
.page-id-23 .press-release-footer-section .contact-get-in-touch > .elementor-column:nth-child(3) {
flex : 2 1 0 !important;
width : 0 !important;
max-width : none !important;
min-width : 0 !important;
overflow : visible !important;
}
}
/* ── Tablet (768px – 1023px): cards 1+2 side-by-side (50/50), card 3 full width ── */
@media (min-width: 768px) and (max-width: 1023px) {
.page-id-23 .press-release-footer-section .contact-get-in-touch {
display : flex !important;
flex-direction : row !important;
flex-wrap : wrap !important;
}
.page-id-23 .press-release-footer-section .contact-get-in-touch > .e-con:nth-child(1),
.page-id-23 .press-release-footer-section .contact-get-in-touch > .e-con:nth-child(2),
.page-id-23 .press-release-footer-section .contact-get-in-touch > .elementor-column:nth-child(1),
.page-id-23 .press-release-footer-section .contact-get-in-touch > .elementor-column:nth-child(2) {
flex : 0 0 calc(50% - 12px) !important;
width : calc(50% - 12px) !important;
max-width : calc(50% - 12px) !important;
min-width : 0 !important;
overflow : visible !important;
}
.page-id-23 .press-release-footer-section .contact-get-in-touch > .e-con:nth-child(3),
.page-id-23 .press-release-footer-section .contact-get-in-touch > .elementor-column:nth-child(3) {
flex : 0 0 100% !important;
width : 100% !important;
max-width : 100% !important;
min-width : 0 !important;
overflow : visible !important;
}
}
/* ── Mobile (≤ 767px): all cards stacked full width ── */
@media (max-width: 767px) {
.page-id-23 .press-release-footer-section .contact-get-in-touch {
flex-wrap : wrap !important;
}
.page-id-23 .press-release-footer-section .contact-get-in-touch > .e-con,
.page-id-23 .press-release-footer-section .contact-get-in-touch > .elementor-column {
flex : 0 0 100% !important;
width : 100% !important;
max-width : 100% !important;
min-width : 0 !important;
overflow : visible !important;
}
}
/* ==========================================================================
Stories — staggered two-portrait layout
Left image: taller, offset down. Right image: shorter, sits at top.
data-id selectors beat Elementor's generated class specificity.
========================================================================== */
/* Parent: flex row, children aligned to top */
[data-id="58d4cab"].stories-up-side-down-section {
display : flex !important;
flex-direction : row !important;
align-items : flex-start !important;
flex-wrap : nowrap !important;
gap : 24px !important;
padding : 0 !important;
width : 100% !important;
}
/* Left child — pushed down to create stagger */
[data-id="58d4cab"] > [data-id="e7dcd6f"],
.stories-up-side-down-section div:nth-child(1) {
flex : 0 0 calc(50% - 12px) !important;
width : calc(50% - 12px) !important;
max-width : calc(50% - 12px) !important;
min-width : 0 !important;
height : 380px !important;
min-height : 380px !important;
max-height : 380px !important;
margin-top : 80px !important;
border-radius : 20px !important;
overflow : hidden !important;
}
/* Right child — sits at top of row */
[data-id="58d4cab"] > [data-id="b954981"],
.stories-up-side-down-section div:nth-child(2) {
flex : 0 0 calc(50% - 12px) !important;
width : calc(50% - 12px) !important;
max-width : calc(50% - 12px) !important;
min-width : 0 !important;
height : 380px !important;
min-height : 380px !important;
max-height : 380px !important;
margin-top : 0 !important;
border-radius : 20px !important;
overflow : hidden !important;
}
/* Responsive: stack on mobile, remove stagger */
@media (max-width: 767px) {
[data-id="58d4cab"].stories-up-side-down-section {
flex-direction : column !important;
}
[data-id="58d4cab"] > [data-id="e7dcd6f"],
.stories-up-side-down-section div:nth-child(1) {
width : 100% !important;
max-width : 100% !important;
height : 320px !important;
margin-top : 0 !important;
}
[data-id="58d4cab"] > [data-id="b954981"],
.stories-up-side-down-section div:nth-child(2) {
width : 100% !important;
max-width : 100% !important;
height : 320px !important;
margin-top : 0 !important;
}
}
/* ==========================================================================
Editorial Collection — right section divider line after child
========================================================================== */
.editorial-collection-right-section-child {
position : relative !important;
padding-bottom : 20px !important;
margin-top : 15px !important;
}
/* Border line on all children except the last */
.editorial-collection-right-section-child:not(:last-child)::after {
content : "";
display : block;
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : 1px;
background : linear-gradient(to right, rgb(66 99 80) 0%, rgba(0, 0, 0, 0) 100%);
opacity : 0.5;
}
/* ==========================================================================
Podcast Guest Form (.guest-form wrapper)
========================================================================== */
/* Labels — CF7 column and full-column variants */
.guest-form .cf7-col label,
.guest-form .cf7-col-full label,
.guest-form label {
font-family : "Poppins", sans-serif;
font-size : 14px;
line-height : 26px;
font-weight : 400;
color : #000000;
}
/* Placeholders */
.guest-form input::placeholder,
.guest-form textarea::placeholder,
.guest-form select::placeholder {
font-family : "Poppins", sans-serif;
font-size : 12px;
font-weight : 300;
color : rgba(0, 0, 0, 0.502);
opacity : 1;
}
/* Input / Textarea / Select fields */
.guest-form input[type="text"],
.guest-form input[type="email"],
.guest-form input[type="tel"],
.guest-form input[type="url"],
.guest-form input[type="number"],
.guest-form textarea,
.guest-form select {
font-family : "Poppins", sans-serif;
font-size : 12px;
font-weight : 300;
color : #000000;
background-color : #ffffff;
border : 1px solid #1d75bd;
border-radius : 8px;
width : 100%;
box-sizing : border-box;
}
/* Submit button */
.guest-form input[type="submit"],
.guest-form button[type="submit"],
.guest-form .wpcf7-submit {
font-family : "Poppins", sans-serif;
font-size : 20px;
line-height : 24px;
font-weight : 500;
color : #ffffff;
text-align : center;
}