/* FOnts */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Open_Sans/OpenSans-ExtraBold.woff2') format('woff2'),
        url('../fonts/Open_Sans/OpenSans-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Open_Sans/OpenSans-Light.woff2') format('woff2'),
        url('../fonts/Open_Sans/OpenSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Open_Sans/OpenSans-Medium.woff2') format('woff2'),
        url('../fonts/Open_Sans/OpenSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Open_Sans/OpenSans-Regular.woff2') format('woff2'),
        url('../fonts/Open_Sans/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Open_Sans/OpenSans-Bold.woff2') format('woff2'),
        url('../fonts/Open_Sans/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Open_Sans/OpenSans-SemiBold.woff2') format('woff2'),
        url('../fonts/Open_Sans/OpenSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-BoldItalic.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-ExtraBold.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-Italic.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-Medium.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-MediumItalic.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-Regular.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-SemiBold.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-Black.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-BlackItalic.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Playfair_Display/PlayfairDisplay-Bold.woff2') format('woff2'),
        url('../fonts/Playfair_Display/PlayfairDisplay-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root{
    --primary-color : #1E3A5F;
    --secondary-color : #D4A857;
    --blue-bg-400 : #4B617F;
    --white-color : #FFFFFF;
    --black-500 :#0B1A2D;
    --light-bg : #E0E9FF;
    --accent-50 : #FBF6EE;
    --text-color : #E7E8EA;

    /* Fonts */
    --font-playfair: 'Playfair Display', serif;
    --font-open-sans: 'Open Sans', sans-serif;
}


* {box-sizing: border-box;}
body {font-family: var(--font-open-sans); margin: 0px; padding: 0px; font-size: 24px; line-height: 1.4; color: var(--text-color);}

section>div { padding-inline: 20px; margin-block: 0px;}

h1, h2, h3, h4, h5, h6 {line-height: 1.2 !important; margin: 0px; font-weight: 700; font-family: var(--font-playfair);}
.has-xxl-font-size {font-size: 115px !important;}
.has-xl-font-size {font-size: 64px !important;}
.has-large-font-size {font-size: 56px !important;}
.has-medium-font-size {font-size: 38px !important;}
.has-small-font-size {font-size: 24px !important;}
.section-spacing {padding-block: 100px !important;}
p a, .listing_group li a, .principle_list li a, p span {color: var(--secondary-color) !important; text-decoration: none;}
p a:hover, .listing_group li a:hover, .principle_list li a:hover {text-decoration: underline;}

.section_heading {padding-bottom: 32px; margin-bottom: 40px; position: relative;}
.section_heading::after {content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; max-width: 293px; height: 4px; border-radius: 4px; background-color: var(--secondary-color);}


/* Hero Banner */
.banner_section {padding-bottom: 0px !important;}
.banner_section_subtitle  {padding: 14px; font-weight: 700; text-align: center; margin: 30px 0px 20px; background-color: var(--primary-color); color: var(--white-color);}
.banner_section>div>div:first-child {padding-bottom: 100px;}


.banner_box_section {padding: 0px; margin-bottom: -100px; position: relative;}
/* .banner_box_section::before {content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; background-color: var(--light-bg);} */
.banner_box_section .yellow_box p{padding: 50px; border-radius: 24px; background-color: var(--secondary-color); margin: 0px;}


.judicial_section { padding-left: calc((100% - 1320px)/2);}

.experience_section>div {padding-right: 0px;}
.listing_group {margin-left: 0px; line-height: 1.8;}

.principles_section {background: url(https://johnsonforjustice.org/wp-content/uploads/2026/04/background-img.webp) no-repeat center; background-size: cover; position: relative;}
.principles_section::before {content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #00000099;}
.principles_section>div {position: relative;}
.principles_list_group {padding: 40px; background-color: #00000075; border-radius: 12px;}
.principle_list {list-style: none; padding: 0px; margin: 0px;}
.principle_list li {display: flex; align-items: flex-start; gap: 12px; margin-bottom: 25px; color: var(--text-color);}
.principle_list li:last-child {margin-bottom: 0px;}
.principle_list li p {margin: 0px;}
.principle_list li img {flex: 0 0 auto;}

.home .post-thumbnail {display: none;}


.banner_box_section .wp-block-group.yellow_box.is-layout-constrained.wp-block-group-is-layout-constrained {transform: translate(0px, -100px);}
.banner-img {margin-right: -130px;transform: translate(40px, 0px);}
.sub-text-wrap {margin-bottom: 0;}
.banner-heading span{font-size: 135px;}

.sub-hero-banner{position: relative;min-height: 450px;display: flex;align-items: center;justify-content: center; padding-inline: 20px;}
.sub-hero-banner::before{content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #00000066;}

/* career */
.career_section{background: url(https://johnsonforjustice.org/wp-content/uploads/2026/04/LawBooks1-scaled.jpeg) no-repeat center; background-size: cover;}
.principles_section .wp-block-heading {position: relative;}
.mt-0{margin-top: 0 !important;}
.mb-0{margin-bottom: 0 !important;}
.mb-40{margin-bottom: 40px;}
.mt-40{margin-top: 40px;}
.pt-0{padding-top: 0 !important;}

/* Personal Life */
.personal_life_section{background: url(https://johnsonforjustice.org/wp-content/uploads/2026/04/299.jpg) no-repeat; background-position: 50% 60%; background-size: cover;}
.personal-grid-image img {width: 100%;border-radius: 12px;}

/* Events */
.events_section{background: url(https://johnsonforjustice.org/wp-content/uploads/2026/04/events-hero-bg.webp) no-repeat center right; background-size: cover;}

/* contact */
.contact-banner{background: url(https://johnsonforjustice.org/wp-content/uploads/2026/04/AEJ02780-1-scaled.jpg) no-repeat center; background-position: 50% 30%; background-size: cover; 
}
.contact-banner::before{background: #00000099;}
.contact_listing {margin-top: 20px; padding-left: 40px;border-left: 2px solid #B9C2CD;border-radius: 2px;}
.contact_listing p{margin: 0 0 18px 0;}
.contact_listing p:last-child{margin-bottom: 0;}
section.team-section {margin-top: 32px;}
.team-container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;padding: 0 !important;}
.team-card {background: #243e63;border-radius: 12px;padding: 30px;color: #fff;transition: transform 0.3s ease;}
.team-card:hover {transform: translateY(-5px);}
.team-header {display: flex;align-items: center;gap: 20px;margin-bottom: 16px;border-bottom: 1px solid rgba(255,255,255,0.2);padding-bottom: 10px;}
.team-section .avatar {width: 72px;height: 72px;border-radius: 50%;background: #6c7f99;position: relative;}
.team-header h4 {margin: 0;font-size: 24px;font-family: 'Open Sans';font-weight: 600;line-height: 100% !important; color : var(--text-color);}
.team-header span {font-size: 24px;color: #8F969E;}
.team-card .email {margin: 0;font-size: 22px;color: #D4A857;word-break: break-all;text-decoration: none;;}
.team-card .email:hover{text-decoration: underline;}
.contact-grid-main .wp-block-columns.is-layout-flex{margin-bottom: 0 !important;}


.bar_admissions{background: url(https://johnsonforjustice.org/wp-content/uploads/2026/04/bar-admissions.webp) no-repeat center; background-size: cover;}
.entry-footer {display: none;}
.ifram_box {
	margin-top: 50px !important;
    border-radius: 20px;
    overflow: hidden;
}

/* Responsive CSS */
@media screen and (max-width: 1700px) {
.has-xxl-font-size {font-size: 90px !important;}
.has-xl-font-size {font-size: 55px !important;}
.has-large-font-size {font-size: 45px !important;}
.has-medium-font-size {font-size: 35px !important;}
.has-small-font-size {font-size: 22px !important;}
body {font-size: 22px;}
.banner-img{margin: 0;}
}

@media screen and (max-width: 1441px) {
.has-xxl-font-size {font-size: 70px !important;}
.has-xl-font-size {font-size: 50px !important;}
.has-large-font-size {font-size: 40px !important;}
.has-medium-font-size {font-size: 30px !important;}
.has-small-font-size {font-size: 20px !important;}
body {font-size: 20px;}
.banner-img{transform: translate(0px, 0px);}
.banner-heading span {font-size: 80px;}
}

@media screen and (max-width: 1199px) {
    .sub-hero-banner{min-height: 300px;}
}

@media screen and (max-width: 1024px) {
.has-xxl-font-size {font-size: 65px !important;}
.banner-heading span {font-size: 70px;}
.has-xl-font-size {font-size: 45px !important;}
.has-large-font-size {font-size: 35px !important;}
.has-medium-font-size {font-size: 28px !important;}

.banner_section>div>div:first-child  {padding-bottom: 130px;}
}

@media (max-width: 992px) {
    .team-container {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 781px) {
    .has-xxl-font-size {font-size: 50px !important;}
    .has-xl-font-size {font-size: 30px !important;}
    .has-large-font-size {font-size: 26px !important;}
    .has-medium-font-size {font-size: 22px !important;}
    .has-small-font-size {font-size: 18px !important;}
    .banner-heading span {font-size: 60px;}
    body {font-size: 18px;}

	.sub-hero-banner{min-height: 250px;}
    .banner_section .wp-block-heading {text-align: center;}
    .banner_section>div>div:first-child {padding-bottom: 0;}
    .banner_section .wp-block-columns {gap: 0;}
    .section-spacing {padding-block: 50px !important;}
    .section_heading{padding-bottom: 22px;margin-bottom: 30px;}

    /* Personal Life */
    .personal-grid-section p.mt-0.has-white-color ~ p {margin-bottom: 5px;}
    
    /* contact */
    .team-header h4,.team-header span{font-size: 20px;}
    .team-section .avatar{width: 60px;height: 60px;}
    .team-card .email{font-size: 18px;}

    .mt-0{margin-top: 0 !important;}
    .mb-0{margin-bottom: 0 !important;}
    .mb-40{margin-bottom: 40px;}
    .pt-0{padding-top: 0 !important;}
}

@media (max-width: 576px) {
    .has-xxl-font-size {font-size: 46px !important;}
    .banner-heading span {font-size: 55px;}
    .team-container {grid-template-columns: 1fr;}

    .banner_box_section .yellow_box p, .principles_list_group {padding: 30px;}
    .banner_box_section .wp-block-group.yellow_box.is-layout-constrained.wp-block-group-is-layout-constrained {transform: translate(0px, -60px);}
	.banner_box_section { margin-bottom: -55px !important; position: relative;}
}
.mb-0 img

 {
    border-radius: 10px;
}

.family_gallary img {
    border-radius: 10px !important;
}