.elementor-27 .elementor-element.elementor-element-cf0a8c1{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-27 .elementor-element.elementor-element-cf0a8c1:not(.elementor-motion-effects-element-type-background), .elementor-27 .elementor-element.elementor-element-cf0a8c1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ec10634 );}.elementor-27 .elementor-element.elementor-element-895029c{--display:flex;}.elementor-27 .elementor-element.elementor-element-895029c:not(.elementor-motion-effects-element-type-background), .elementor-27 .elementor-element.elementor-element-895029c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ec10634 );}.elementor-27 .elementor-element.elementor-element-bb6088e{--display:flex;}.elementor-27 .elementor-element.elementor-element-bb6088e:not(.elementor-motion-effects-element-type-background), .elementor-27 .elementor-element.elementor-element-bb6088e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ec10634 );}.elementor-27 .elementor-element.elementor-element-30251e8{--display:flex;}.elementor-27 .elementor-element.elementor-element-30251e8:not(.elementor-motion-effects-element-type-background), .elementor-27 .elementor-element.elementor-element-30251e8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ec10634 );}.elementor-27 .elementor-element.elementor-element-858f194{--display:flex;}.elementor-27 .elementor-element.elementor-element-db73beb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-27 .elementor-element.elementor-element-c4782a3{--display:flex;}.elementor-27 .elementor-element.elementor-element-c4782a3:not(.elementor-motion-effects-element-type-background), .elementor-27 .elementor-element.elementor-element-c4782a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ec10634 );}body.elementor-page-27:not(.elementor-motion-effects-element-type-background), body.elementor-page-27 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ec10634 );}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-ce75256 *//* ========================================================= OUR EXPERT TEAM PREMIUM REAL ESTATE DESIGN ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ========================================================= COLORS ========================================================= */ :root { --team-primary: #D05B37; --team-dark: #060517; --team-light: #F3F0EA; --team-white: #FFFFFF; --team-muted: #625D58; --team-border: rgba(6, 5, 23, 0.14); } /* ========================================================= RESET ========================================================= */ .expert-team-section, .expert-team-section * { box-sizing: border-box; } .expert-team-section img { max-width: 100%; } /* ========================================================= MAIN SECTION DESKTOP ========================================================= */ .expert-team-section { width: 100%; padding: 80px 50px 0px 50px; background: #F3F0EA; font-family: "DM Sans", sans-serif; color: #060517; } /* ========================================================= MAIN CONTAINER ========================================================= */ .expert-team-container { width: 100%; max-width: 1420px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .expert-team-header { width: 100%; max-width: 820px; margin-bottom: 55px; } /* ========================================================= LABEL ========================================================= */ .expert-team-label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 2px; color: #D05B37; } .expert-team-line { width: 42px; height: 1px; flex-shrink: 0; background: #D05B37; } /* ========================================================= MAIN HEADING ========================================================= */ .expert-team-header h2 { margin: 0 0 20px; font-family: "Cormorant Garamond", serif; font-size: 76px; line-height: 0.98; font-weight: 600; letter-spacing: -1.5px; color: #060517; } .expert-team-header h2 span { display: block; font-style: normal; font-weight: 500; color: #D05B37; } /* ========================================================= HEADER DESCRIPTION ========================================================= */ .expert-team-header p { max-width: 700px; margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.75; font-weight: 400; color: #625D58; } /* ========================================================= TEAM GRID DESKTOP ========================================================= */ .expert-team-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-bottom: 80px; } /* ========================================================= TEAM CARD ========================================================= */ .expert-team-card { width: 100%; min-width: 0; display: grid; grid-template-columns: 0.9fr 1.1fr; background: #FFFFFF; border: 1px solid var(--team-border); } /* ========================================================= REVERSE CARD DESKTOP ONLY ========================================================= */ .expert-team-card-reverse { grid-template-columns: 1.1fr 0.9fr; } /* ========================================================= TEAM IMAGE ========================================================= */ .expert-team-image { width: 100%; height: 460px; overflow: hidden; } .expert-team-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ========================================================= TEAM INFORMATION ========================================================= */ .expert-team-info { width: 100%; min-width: 0; padding: 36px 30px; display: flex; flex-direction: column; justify-content: space-between; } /* ========================================================= ROLE ========================================================= */ .expert-team-role { margin-bottom: 20px; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 1.5px; color: #D05B37; } /* ========================================================= NAME ========================================================= */ .expert-team-info h3 { margin: 0 0 16px; font-family: "Cormorant Garamond", serif; font-size: 44px; line-height: 1; font-weight: 600; color: #060517; } /* ========================================================= DESCRIPTION ========================================================= */ .expert-team-info p { margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.7; font-weight: 400; color: #625D58; } /* ========================================================= BOTTOM AREA ========================================================= */ .expert-team-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--team-border); } /* ========================================================= CATEGORY ========================================================= */ .expert-team-bottom > span { max-width: 60%; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 600; color: #D05B37; } /* ========================================================= VIEW PROFILE ========================================================= */ .expert-team-bottom a { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0.5px; color: #060517 !important; text-decoration: none !important; } /* ========================================================= LOCK ALL LINK STATES NO HOVER EFFECT ========================================================= */ .expert-team-bottom a:link, .expert-team-bottom a:visited, .expert-team-bottom a:hover, .expert-team-bottom a:active, .expert-team-bottom a:focus { color: #060517 !important; background: transparent !important; text-decoration: none !important; } /* ========================================================= PROFILE ARROW ========================================================= */ .expert-team-bottom a i { color: #D05B37; font-size: 14px; } /* ========================================================= TABLET 768px - 1100px IMAGE LEFT CONTENT RIGHT ONE CARD PER ROW ========================================================= */ @media (max-width: 1100px) and (min-width: 768px) { /* ===================================================== SECTION ===================================================== */ .expert-team-section { width: 100%; padding: 50px 30px 0px 30px; } /* ===================================================== CONTAINER ===================================================== */ .expert-team-container { width: 100%; max-width: 100%; } /* ===================================================== HEADER ===================================================== */ .expert-team-header { max-width: 760px; margin-bottom: 40px; } .expert-team-label { gap: 10px; margin-bottom: 15px; font-size: 14px; letter-spacing: 1.8px; } .expert-team-line { width: 32px; } .expert-team-header h2 { margin-bottom: 18px; font-size: 58px; line-height: 1; letter-spacing: -0.8px; } .expert-team-header p { max-width: 700px; font-size: 16px; line-height: 1.65; } /* ===================================================== TEAM GRID ===================================================== */ .expert-team-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 50px; } /* ===================================================== ALL CARDS IMAGE LEFT + CONTENT RIGHT ===================================================== */ .expert-team-card, .expert-team-card-reverse { width: 100%; min-width: 0; display: grid; grid-template-columns: 42% 58%; background: #FFFFFF; border: 1px solid var(--team-border); } /* ===================================================== FORCE REVERSE CARDS TO NORMAL TABLET ORDER ===================================================== */ .expert-team-card-reverse .expert-team-image { order: 1; } .expert-team-card-reverse .expert-team-info { order: 2; } /* ===================================================== IMAGE ===================================================== */ .expert-team-image { width: 100%; height: 360px; overflow: hidden; } .expert-team-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ===================================================== CONTENT ===================================================== */ .expert-team-info { width: 100%; min-width: 0; min-height: 360px; padding: 30px 28px; display: flex; flex-direction: column; justify-content: space-between; } /* ===================================================== ROLE ===================================================== */ .expert-team-role { margin-bottom: 15px; font-size: 14px; line-height: 1.4; letter-spacing: 1.3px; } /* ===================================================== NAME ===================================================== */ .expert-team-info h3 { margin: 0 0 14px; font-size: 40px; line-height: 1; letter-spacing: -0.3px; } /* ===================================================== DESCRIPTION ===================================================== */ .expert-team-info p { width: 100%; max-width: 100%; margin: 0; font-size: 16px; line-height: 1.65; } /* ===================================================== BOTTOM ===================================================== */ .expert-team-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--team-border); } .expert-team-bottom > span { max-width: 52%; font-size: 14px; line-height: 1.45; } .expert-team-bottom a { flex-shrink: 0; font-size: 16px; } } /* ========================================================= MOBILE 767px AND BELOW IMAGE TOP CONTENT BELOW ========================================================= */ @media (max-width: 767px) { .expert-team-section { width: 100%; padding: 30px 10px 0px 10px; } /* ===================================================== HEADER ===================================================== */ .expert-team-header { max-width: 100%; margin-bottom: 35px; } .expert-team-label { gap: 10px; margin-bottom: 13px; font-size: 16px; letter-spacing: 1.5px; } .expert-team-line { width: 32px; } .expert-team-header h2 { margin-bottom: 18px; font-size: 50px; line-height: 1; letter-spacing: -0.8px; } .expert-team-header p { max-width: 100%; font-size: 16px; line-height: 1.7; } /* ===================================================== GRID ===================================================== */ .expert-team-grid { width: 100%; grid-template-columns: 1fr; gap: 18px; padding-bottom: 30px; } /* ===================================================== CARDS ===================================================== */ .expert-team-card, .expert-team-card-reverse { width: 100%; display: flex; flex-direction: column; grid-template-columns: none; } /* ===================================================== IMAGE ===================================================== */ .expert-team-image { width: 100%; height: 360px; order: 1; } .expert-team-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* ===================================================== CONTENT ===================================================== */ .expert-team-info { width: 100%; min-height: auto; padding: 28px 22px; order: 2; } /* ROLE */ .expert-team-role { margin-bottom: 16px; font-size: 16px; letter-spacing: 1.2px; } /* NAME */ .expert-team-info h3 { margin-bottom: 14px; font-size: 38px; line-height: 1; } /* DESCRIPTION */ .expert-team-info p { font-size: 16px; line-height: 1.65; } /* ===================================================== BOTTOM ===================================================== */ .expert-team-bottom { width: 100%; align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 25px; padding-top: 17px; } .expert-team-bottom > span { max-width: 100%; font-size: 16px; } .expert-team-bottom a { font-size: 16px; } } /* ========================================================= SMALL MOBILE 380px AND BELOW ========================================================= */ @media (max-width: 380px) { .expert-team-section { padding: 25px 10px 0px 10px; } .expert-team-header { margin-bottom: 30px; } .expert-team-header h2 { font-size: 43px; } .expert-team-header p { font-size: 16px; line-height: 1.65; } .expert-team-image { height: 320px; } .expert-team-info { padding: 25px 20px; } .expert-team-role { font-size: 15px; } .expert-team-info h3 { font-size: 34px; } .expert-team-bottom { gap: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-6a40629 *//* ========================================================= OUR EXPERT TEAM PREMIUM REAL ESTATE DESIGN ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ========================================================= COLORS ========================================================= */ :root { --team-primary: #D05B37; --team-dark: #060517; --team-light: #F3F0EA; --team-white: #FFFFFF; --team-muted: #625D58; --team-border: rgba(6, 5, 23, 0.14); } /* ========================================================= RESET ========================================================= */ .expert-team-section, .expert-team-section * { box-sizing: border-box; } .expert-team-section img { max-width: 100%; } /* ========================================================= MAIN SECTION DESKTOP ========================================================= */ .expert-team-section { width: 100%; padding: 80px 50px 0px 50px; background: #F3F0EA; font-family: "DM Sans", sans-serif; color: #060517; } /* ========================================================= MAIN CONTAINER ========================================================= */ .expert-team-container { width: 100%; max-width: 1420px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .expert-team-header { width: 100%; max-width: 820px; margin-bottom: 55px; } /* ========================================================= LABEL ========================================================= */ .expert-team-label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 2px; color: #D05B37; } .expert-team-line { width: 42px; height: 1px; flex-shrink: 0; background: #D05B37; } /* ========================================================= MAIN HEADING ========================================================= */ .expert-team-header h2 { margin: 0 0 20px; font-family: "Cormorant Garamond", serif; font-size: 76px; line-height: 0.98; font-weight: 600; letter-spacing: -1.5px; color: #060517; } .expert-team-header h2 span { display: block; font-style: normal; font-weight: 500; color: #D05B37; } /* ========================================================= HEADER DESCRIPTION ========================================================= */ .expert-team-header p { max-width: 700px; margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.75; font-weight: 400; color: #625D58; } /* ========================================================= TEAM GRID DESKTOP ========================================================= */ .expert-team-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-bottom: 80px; } /* ========================================================= TEAM CARD ========================================================= */ .expert-team-card { width: 100%; min-width: 0; display: grid; grid-template-columns: 0.9fr 1.1fr; background: #FFFFFF; border: 1px solid var(--team-border); } /* ========================================================= REVERSE CARD DESKTOP ONLY ========================================================= */ .expert-team-card-reverse { grid-template-columns: 1.1fr 0.9fr; } /* ========================================================= TEAM IMAGE ========================================================= */ .expert-team-image { width: 100%; height: 460px; overflow: hidden; } .expert-team-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ========================================================= TEAM INFORMATION ========================================================= */ .expert-team-info { width: 100%; min-width: 0; padding: 36px 30px; display: flex; flex-direction: column; justify-content: space-between; } /* ========================================================= ROLE ========================================================= */ .expert-team-role { margin-bottom: 20px; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 1.5px; color: #D05B37; } /* ========================================================= NAME ========================================================= */ .expert-team-info h3 { margin: 0 0 16px; font-family: "Cormorant Garamond", serif; font-size: 44px; line-height: 1; font-weight: 600; color: #060517; } /* ========================================================= DESCRIPTION ========================================================= */ .expert-team-info p { margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.7; font-weight: 400; color: #625D58; } /* ========================================================= BOTTOM AREA ========================================================= */ .expert-team-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--team-border); } /* ========================================================= CATEGORY ========================================================= */ .expert-team-bottom > span { max-width: 60%; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 600; color: #D05B37; } /* ========================================================= VIEW PROFILE ========================================================= */ .expert-team-bottom a { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0.5px; color: #060517 !important; text-decoration: none !important; } /* ========================================================= LOCK ALL LINK STATES NO HOVER EFFECT ========================================================= */ .expert-team-bottom a:link, .expert-team-bottom a:visited, .expert-team-bottom a:hover, .expert-team-bottom a:active, .expert-team-bottom a:focus { color: #060517 !important; background: transparent !important; text-decoration: none !important; } /* ========================================================= PROFILE ARROW ========================================================= */ .expert-team-bottom a i { color: #D05B37; font-size: 14px; } /* ========================================================= TABLET 768px - 1100px IMAGE LEFT CONTENT RIGHT ONE CARD PER ROW ========================================================= */ @media (max-width: 1100px) and (min-width: 768px) { /* ===================================================== SECTION ===================================================== */ .expert-team-section { width: 100%; padding: 50px 30px 0px 30px; } /* ===================================================== CONTAINER ===================================================== */ .expert-team-container { width: 100%; max-width: 100%; } /* ===================================================== HEADER ===================================================== */ .expert-team-header { max-width: 760px; margin-bottom: 40px; } .expert-team-label { gap: 10px; margin-bottom: 15px; font-size: 14px; letter-spacing: 1.8px; } .expert-team-line { width: 32px; } .expert-team-header h2 { margin-bottom: 18px; font-size: 58px; line-height: 1; letter-spacing: -0.8px; } .expert-team-header p { max-width: 700px; font-size: 16px; line-height: 1.65; } /* ===================================================== TEAM GRID ===================================================== */ .expert-team-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 50px; } /* ===================================================== ALL CARDS IMAGE LEFT + CONTENT RIGHT ===================================================== */ .expert-team-card, .expert-team-card-reverse { width: 100%; min-width: 0; display: grid; grid-template-columns: 42% 58%; background: #FFFFFF; border: 1px solid var(--team-border); } /* ===================================================== FORCE REVERSE CARDS TO NORMAL TABLET ORDER ===================================================== */ .expert-team-card-reverse .expert-team-image { order: 1; } .expert-team-card-reverse .expert-team-info { order: 2; } /* ===================================================== IMAGE ===================================================== */ .expert-team-image { width: 100%; height: 360px; overflow: hidden; } .expert-team-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ===================================================== CONTENT ===================================================== */ .expert-team-info { width: 100%; min-width: 0; min-height: 360px; padding: 30px 28px; display: flex; flex-direction: column; justify-content: space-between; } /* ===================================================== ROLE ===================================================== */ .expert-team-role { margin-bottom: 15px; font-size: 14px; line-height: 1.4; letter-spacing: 1.3px; } /* ===================================================== NAME ===================================================== */ .expert-team-info h3 { margin: 0 0 14px; font-size: 40px; line-height: 1; letter-spacing: -0.3px; } /* ===================================================== DESCRIPTION ===================================================== */ .expert-team-info p { width: 100%; max-width: 100%; margin: 0; font-size: 16px; line-height: 1.65; } /* ===================================================== BOTTOM ===================================================== */ .expert-team-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--team-border); } .expert-team-bottom > span { max-width: 52%; font-size: 14px; line-height: 1.45; } .expert-team-bottom a { flex-shrink: 0; font-size: 16px; } } /* ========================================================= MOBILE 767px AND BELOW IMAGE TOP CONTENT BELOW ========================================================= */ @media (max-width: 767px) { .expert-team-section { width: 100%; padding: 30px 10px 0px 10px; } /* ===================================================== HEADER ===================================================== */ .expert-team-header { max-width: 100%; margin-bottom: 35px; } .expert-team-label { gap: 10px; margin-bottom: 13px; font-size: 16px; letter-spacing: 1.5px; } .expert-team-line { width: 32px; } .expert-team-header h2 { margin-bottom: 18px; font-size: 50px; line-height: 1; letter-spacing: -0.8px; } .expert-team-header p { max-width: 100%; font-size: 16px; line-height: 1.7; } /* ===================================================== GRID ===================================================== */ .expert-team-grid { width: 100%; grid-template-columns: 1fr; gap: 18px; padding-bottom: 30px; } /* ===================================================== CARDS ===================================================== */ .expert-team-card, .expert-team-card-reverse { width: 100%; display: flex; flex-direction: column; grid-template-columns: none; } /* ===================================================== IMAGE ===================================================== */ .expert-team-image { width: 100%; height: 360px; order: 1; } .expert-team-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* ===================================================== CONTENT ===================================================== */ .expert-team-info { width: 100%; min-height: auto; padding: 28px 22px; order: 2; } /* ROLE */ .expert-team-role { margin-bottom: 16px; font-size: 16px; letter-spacing: 1.2px; } /* NAME */ .expert-team-info h3 { margin-bottom: 14px; font-size: 38px; line-height: 1; } /* DESCRIPTION */ .expert-team-info p { font-size: 16px; line-height: 1.65; } /* ===================================================== BOTTOM ===================================================== */ .expert-team-bottom { width: 100%; align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 25px; padding-top: 17px; } .expert-team-bottom > span { max-width: 100%; font-size: 16px; } .expert-team-bottom a { font-size: 16px; } } /* ========================================================= SMALL MOBILE 380px AND BELOW ========================================================= */ @media (max-width: 380px) { .expert-team-section { padding: 25px 10px 0px 10px; } .expert-team-header { margin-bottom: 30px; } .expert-team-header h2 { font-size: 43px; } .expert-team-header p { font-size: 16px; line-height: 1.65; } .expert-team-image { height: 320px; } .expert-team-info { padding: 25px 20px; } .expert-team-role { font-size: 15px; } .expert-team-info h3 { font-size: 34px; } .expert-team-bottom { gap: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-fb7845a *//* ========================================================= OUR EXPERT TEAM PREMIUM REAL ESTATE DESIGN ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ========================================================= COLORS ========================================================= */ :root { --team-primary: #D05B37; --team-dark: #060517; --team-light: #F3F0EA; --team-white: #FFFFFF; --team-muted: #625D58; --team-border: rgba(6, 5, 23, 0.14); } /* ========================================================= RESET ========================================================= */ .expert-team-section, .expert-team-section * { box-sizing: border-box; } .expert-team-section img { max-width: 100%; } /* ========================================================= MAIN SECTION DESKTOP ========================================================= */ .expert-team-section { width: 100%; padding: 80px 50px 0px 50px; background: #F3F0EA; font-family: "DM Sans", sans-serif; color: #060517; } /* ========================================================= MAIN CONTAINER ========================================================= */ .expert-team-container { width: 100%; max-width: 1420px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .expert-team-header { width: 100%; max-width: 820px; margin-bottom: 55px; } /* ========================================================= LABEL ========================================================= */ .expert-team-label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 2px; color: #D05B37; } .expert-team-line { width: 42px; height: 1px; flex-shrink: 0; background: #D05B37; } /* ========================================================= MAIN HEADING ========================================================= */ .expert-team-header h2 { margin: 0 0 20px; font-family: "Cormorant Garamond", serif; font-size: 76px; line-height: 0.98; font-weight: 600; letter-spacing: -1.5px; color: #060517; } .expert-team-header h2 span { display: block; font-style: normal; font-weight: 500; color: #D05B37; } /* ========================================================= HEADER DESCRIPTION ========================================================= */ .expert-team-header p { max-width: 700px; margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.75; font-weight: 400; color: #625D58; } /* ========================================================= TEAM GRID DESKTOP ========================================================= */ .expert-team-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-bottom: 80px; } /* ========================================================= TEAM CARD ========================================================= */ .expert-team-card { width: 100%; min-width: 0; display: grid; grid-template-columns: 0.9fr 1.1fr; background: #FFFFFF; border: 1px solid var(--team-border); } /* ========================================================= REVERSE CARD DESKTOP ONLY ========================================================= */ .expert-team-card-reverse { grid-template-columns: 1.1fr 0.9fr; } /* ========================================================= TEAM IMAGE ========================================================= */ .expert-team-image { width: 100%; height: 460px; overflow: hidden; } .expert-team-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ========================================================= TEAM INFORMATION ========================================================= */ .expert-team-info { width: 100%; min-width: 0; padding: 36px 30px; display: flex; flex-direction: column; justify-content: space-between; } /* ========================================================= ROLE ========================================================= */ .expert-team-role { margin-bottom: 20px; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 1.5px; color: #D05B37; } /* ========================================================= NAME ========================================================= */ .expert-team-info h3 { margin: 0 0 16px; font-family: "Cormorant Garamond", serif; font-size: 44px; line-height: 1; font-weight: 600; color: #060517; } /* ========================================================= DESCRIPTION ========================================================= */ .expert-team-info p { margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.7; font-weight: 400; color: #625D58; } /* ========================================================= BOTTOM AREA ========================================================= */ .expert-team-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--team-border); } /* ========================================================= CATEGORY ========================================================= */ .expert-team-bottom > span { max-width: 60%; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 600; color: #D05B37; } /* ========================================================= VIEW PROFILE ========================================================= */ .expert-team-bottom a { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0.5px; color: #060517 !important; text-decoration: none !important; } /* ========================================================= LOCK ALL LINK STATES NO HOVER EFFECT ========================================================= */ .expert-team-bottom a:link, .expert-team-bottom a:visited, .expert-team-bottom a:hover, .expert-team-bottom a:active, .expert-team-bottom a:focus { color: #060517 !important; background: transparent !important; text-decoration: none !important; } /* ========================================================= PROFILE ARROW ========================================================= */ .expert-team-bottom a i { color: #D05B37; font-size: 14px; } /* ========================================================= TABLET 768px - 1100px IMAGE LEFT CONTENT RIGHT ONE CARD PER ROW ========================================================= */ @media (max-width: 1100px) and (min-width: 768px) { /* ===================================================== SECTION ===================================================== */ .expert-team-section { width: 100%; padding: 50px 30px 0px 30px; } /* ===================================================== CONTAINER ===================================================== */ .expert-team-container { width: 100%; max-width: 100%; } /* ===================================================== HEADER ===================================================== */ .expert-team-header { max-width: 760px; margin-bottom: 40px; } .expert-team-label { gap: 10px; margin-bottom: 15px; font-size: 14px; letter-spacing: 1.8px; } .expert-team-line { width: 32px; } .expert-team-header h2 { margin-bottom: 18px; font-size: 58px; line-height: 1; letter-spacing: -0.8px; } .expert-team-header p { max-width: 700px; font-size: 16px; line-height: 1.65; } /* ===================================================== TEAM GRID ===================================================== */ .expert-team-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 50px; } /* ===================================================== ALL CARDS IMAGE LEFT + CONTENT RIGHT ===================================================== */ .expert-team-card, .expert-team-card-reverse { width: 100%; min-width: 0; display: grid; grid-template-columns: 42% 58%; background: #FFFFFF; border: 1px solid var(--team-border); } /* ===================================================== FORCE REVERSE CARDS TO NORMAL TABLET ORDER ===================================================== */ .expert-team-card-reverse .expert-team-image { order: 1; } .expert-team-card-reverse .expert-team-info { order: 2; } /* ===================================================== IMAGE ===================================================== */ .expert-team-image { width: 100%; height: 360px; overflow: hidden; } .expert-team-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ===================================================== CONTENT ===================================================== */ .expert-team-info { width: 100%; min-width: 0; min-height: 360px; padding: 30px 28px; display: flex; flex-direction: column; justify-content: space-between; } /* ===================================================== ROLE ===================================================== */ .expert-team-role { margin-bottom: 15px; font-size: 14px; line-height: 1.4; letter-spacing: 1.3px; } /* ===================================================== NAME ===================================================== */ .expert-team-info h3 { margin: 0 0 14px; font-size: 40px; line-height: 1; letter-spacing: -0.3px; } /* ===================================================== DESCRIPTION ===================================================== */ .expert-team-info p { width: 100%; max-width: 100%; margin: 0; font-size: 16px; line-height: 1.65; } /* ===================================================== BOTTOM ===================================================== */ .expert-team-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--team-border); } .expert-team-bottom > span { max-width: 52%; font-size: 14px; line-height: 1.45; } .expert-team-bottom a { flex-shrink: 0; font-size: 16px; } } /* ========================================================= MOBILE 767px AND BELOW IMAGE TOP CONTENT BELOW ========================================================= */ @media (max-width: 767px) { .expert-team-section { width: 100%; padding: 30px 10px 0px 10px; } /* ===================================================== HEADER ===================================================== */ .expert-team-header { max-width: 100%; margin-bottom: 35px; } .expert-team-label { gap: 10px; margin-bottom: 13px; font-size: 16px; letter-spacing: 1.5px; } .expert-team-line { width: 32px; } .expert-team-header h2 { margin-bottom: 18px; font-size: 50px; line-height: 1; letter-spacing: -0.8px; } .expert-team-header p { max-width: 100%; font-size: 16px; line-height: 1.7; } /* ===================================================== GRID ===================================================== */ .expert-team-grid { width: 100%; grid-template-columns: 1fr; gap: 18px; padding-bottom: 30px; } /* ===================================================== CARDS ===================================================== */ .expert-team-card, .expert-team-card-reverse { width: 100%; display: flex; flex-direction: column; grid-template-columns: none; } /* ===================================================== IMAGE ===================================================== */ .expert-team-image { width: 100%; height: 360px; order: 1; } .expert-team-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* ===================================================== CONTENT ===================================================== */ .expert-team-info { width: 100%; min-height: auto; padding: 28px 22px; order: 2; } /* ROLE */ .expert-team-role { margin-bottom: 16px; font-size: 16px; letter-spacing: 1.2px; } /* NAME */ .expert-team-info h3 { margin-bottom: 14px; font-size: 38px; line-height: 1; } /* DESCRIPTION */ .expert-team-info p { font-size: 16px; line-height: 1.65; } /* ===================================================== BOTTOM ===================================================== */ .expert-team-bottom { width: 100%; align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 25px; padding-top: 17px; } .expert-team-bottom > span { max-width: 100%; font-size: 16px; } .expert-team-bottom a { font-size: 16px; } } /* ========================================================= SMALL MOBILE 380px AND BELOW ========================================================= */ @media (max-width: 380px) { .expert-team-section { padding: 25px 10px 0px 10px; } .expert-team-header { margin-bottom: 30px; } .expert-team-header h2 { font-size: 43px; } .expert-team-header p { font-size: 16px; line-height: 1.65; } .expert-team-image { height: 320px; } .expert-team-info { padding: 25px 20px; } .expert-team-role { font-size: 15px; } .expert-team-info h3 { font-size: 34px; } .expert-team-bottom { gap: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-1b2a532 *//* ========================================================= OUR EXPERT TEAM PREMIUM REAL ESTATE DESIGN ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ========================================================= COLORS ========================================================= */ :root { --team-primary: #D05B37; --team-dark: #060517; --team-light: #F3F0EA; --team-white: #FFFFFF; --team-muted: #625D58; --team-border: rgba(6, 5, 23, 0.14); } /* ========================================================= RESET ========================================================= */ .expert-team-section, .expert-team-section * { box-sizing: border-box; } .expert-team-section img { max-width: 100%; } /* ========================================================= MAIN SECTION DESKTOP ========================================================= */ .expert-team-section { width: 100%; padding: 80px 50px 0px 50px; background: #F3F0EA; font-family: "DM Sans", sans-serif; color: #060517; } /* ========================================================= MAIN CONTAINER ========================================================= */ .expert-team-container { width: 100%; max-width: 1420px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .expert-team-header { width: 100%; max-width: 820px; margin-bottom: 55px; } /* ========================================================= LABEL ========================================================= */ .expert-team-label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 2px; color: #D05B37; } .expert-team-line { width: 42px; height: 1px; flex-shrink: 0; background: #D05B37; } /* ========================================================= MAIN HEADING ========================================================= */ .expert-team-header h2 { margin: 0 0 20px; font-family: "Cormorant Garamond", serif; font-size: 76px; line-height: 0.98; font-weight: 600; letter-spacing: -1.5px; color: #060517; } .expert-team-header h2 span { display: block; font-style: normal; font-weight: 500; color: #D05B37; } /* ========================================================= HEADER DESCRIPTION ========================================================= */ .expert-team-header p { max-width: 700px; margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.75; font-weight: 400; color: #625D58; } /* ========================================================= TEAM GRID DESKTOP ========================================================= */ .expert-team-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-bottom: 80px; } /* ========================================================= TEAM CARD ========================================================= */ .expert-team-card { width: 100%; min-width: 0; display: grid; grid-template-columns: 0.9fr 1.1fr; background: #FFFFFF; border: 1px solid var(--team-border); } /* ========================================================= REVERSE CARD DESKTOP ONLY ========================================================= */ .expert-team-card-reverse { grid-template-columns: 1.1fr 0.9fr; } /* ========================================================= TEAM IMAGE ========================================================= */ .expert-team-image { width: 100%; height: 460px; overflow: hidden; } .expert-team-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ========================================================= TEAM INFORMATION ========================================================= */ .expert-team-info { width: 100%; min-width: 0; padding: 36px 30px; display: flex; flex-direction: column; justify-content: space-between; } /* ========================================================= ROLE ========================================================= */ .expert-team-role { margin-bottom: 20px; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 1.5px; color: #D05B37; } /* ========================================================= NAME ========================================================= */ .expert-team-info h3 { margin: 0 0 16px; font-family: "Cormorant Garamond", serif; font-size: 44px; line-height: 1; font-weight: 600; color: #060517; } /* ========================================================= DESCRIPTION ========================================================= */ .expert-team-info p { margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.7; font-weight: 400; color: #625D58; } /* ========================================================= BOTTOM AREA ========================================================= */ .expert-team-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--team-border); } /* ========================================================= CATEGORY ========================================================= */ .expert-team-bottom > span { max-width: 60%; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 600; color: #D05B37; } /* ========================================================= VIEW PROFILE ========================================================= */ .expert-team-bottom a { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0.5px; color: #060517 !important; text-decoration: none !important; } /* ========================================================= LOCK ALL LINK STATES NO HOVER EFFECT ========================================================= */ .expert-team-bottom a:link, .expert-team-bottom a:visited, .expert-team-bottom a:hover, .expert-team-bottom a:active, .expert-team-bottom a:focus { color: #060517 !important; background: transparent !important; text-decoration: none !important; } /* ========================================================= PROFILE ARROW ========================================================= */ .expert-team-bottom a i { color: #D05B37; font-size: 14px; } /* ========================================================= TABLET 768px - 1100px IMAGE LEFT CONTENT RIGHT ONE CARD PER ROW ========================================================= */ @media (max-width: 1100px) and (min-width: 768px) { /* ===================================================== SECTION ===================================================== */ .expert-team-section { width: 100%; padding: 50px 30px 0px 30px; } /* ===================================================== CONTAINER ===================================================== */ .expert-team-container { width: 100%; max-width: 100%; } /* ===================================================== HEADER ===================================================== */ .expert-team-header { max-width: 760px; margin-bottom: 40px; } .expert-team-label { gap: 10px; margin-bottom: 15px; font-size: 14px; letter-spacing: 1.8px; } .expert-team-line { width: 32px; } .expert-team-header h2 { margin-bottom: 18px; font-size: 58px; line-height: 1; letter-spacing: -0.8px; } .expert-team-header p { max-width: 700px; font-size: 16px; line-height: 1.65; } /* ===================================================== TEAM GRID ===================================================== */ .expert-team-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 50px; } /* ===================================================== ALL CARDS IMAGE LEFT + CONTENT RIGHT ===================================================== */ .expert-team-card, .expert-team-card-reverse { width: 100%; min-width: 0; display: grid; grid-template-columns: 42% 58%; background: #FFFFFF; border: 1px solid var(--team-border); } /* ===================================================== FORCE REVERSE CARDS TO NORMAL TABLET ORDER ===================================================== */ .expert-team-card-reverse .expert-team-image { order: 1; } .expert-team-card-reverse .expert-team-info { order: 2; } /* ===================================================== IMAGE ===================================================== */ .expert-team-image { width: 100%; height: 360px; overflow: hidden; } .expert-team-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ===================================================== CONTENT ===================================================== */ .expert-team-info { width: 100%; min-width: 0; min-height: 360px; padding: 30px 28px; display: flex; flex-direction: column; justify-content: space-between; } /* ===================================================== ROLE ===================================================== */ .expert-team-role { margin-bottom: 15px; font-size: 14px; line-height: 1.4; letter-spacing: 1.3px; } /* ===================================================== NAME ===================================================== */ .expert-team-info h3 { margin: 0 0 14px; font-size: 40px; line-height: 1; letter-spacing: -0.3px; } /* ===================================================== DESCRIPTION ===================================================== */ .expert-team-info p { width: 100%; max-width: 100%; margin: 0; font-size: 16px; line-height: 1.65; } /* ===================================================== BOTTOM ===================================================== */ .expert-team-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--team-border); } .expert-team-bottom > span { max-width: 52%; font-size: 14px; line-height: 1.45; } .expert-team-bottom a { flex-shrink: 0; font-size: 16px; } } /* ========================================================= MOBILE 767px AND BELOW IMAGE TOP CONTENT BELOW ========================================================= */ @media (max-width: 767px) { .expert-team-section { width: 100%; padding: 30px 10px 0px 10px; } /* ===================================================== HEADER ===================================================== */ .expert-team-header { max-width: 100%; margin-bottom: 35px; } .expert-team-label { gap: 10px; margin-bottom: 13px; font-size: 16px; letter-spacing: 1.5px; } .expert-team-line { width: 32px; } .expert-team-header h2 { margin-bottom: 18px; font-size: 50px; line-height: 1; letter-spacing: -0.8px; } .expert-team-header p { max-width: 100%; font-size: 16px; line-height: 1.7; } /* ===================================================== GRID ===================================================== */ .expert-team-grid { width: 100%; grid-template-columns: 1fr; gap: 18px; padding-bottom: 30px; } /* ===================================================== CARDS ===================================================== */ .expert-team-card, .expert-team-card-reverse { width: 100%; display: flex; flex-direction: column; grid-template-columns: none; } /* ===================================================== IMAGE ===================================================== */ .expert-team-image { width: 100%; height: 360px; order: 1; } .expert-team-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* ===================================================== CONTENT ===================================================== */ .expert-team-info { width: 100%; min-height: auto; padding: 28px 22px; order: 2; } /* ROLE */ .expert-team-role { margin-bottom: 16px; font-size: 16px; letter-spacing: 1.2px; } /* NAME */ .expert-team-info h3 { margin-bottom: 14px; font-size: 38px; line-height: 1; } /* DESCRIPTION */ .expert-team-info p { font-size: 16px; line-height: 1.65; } /* ===================================================== BOTTOM ===================================================== */ .expert-team-bottom { width: 100%; align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 25px; padding-top: 17px; } .expert-team-bottom > span { max-width: 100%; font-size: 16px; } .expert-team-bottom a { font-size: 16px; } } /* ========================================================= SMALL MOBILE 380px AND BELOW ========================================================= */ @media (max-width: 380px) { .expert-team-section { padding: 25px 10px 0px 10px; } .expert-team-header { margin-bottom: 30px; } .expert-team-header h2 { font-size: 43px; } .expert-team-header p { font-size: 16px; line-height: 1.65; } .expert-team-image { height: 320px; } .expert-team-info { padding: 25px 20px; } .expert-team-role { font-size: 15px; } .expert-team-info h3 { font-size: 34px; } .expert-team-bottom { gap: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-c5fcd6d *//* ========================================================= OUR EXPERT TEAM PREMIUM REAL ESTATE DESIGN ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* ========================================================= COLORS ========================================================= */ :root { --team-primary: #D05B37; --team-dark: #060517; --team-light: #F3F0EA; --team-white: #FFFFFF; --team-muted: #625D58; --team-border: rgba(6, 5, 23, 0.14); } /* ========================================================= RESET ========================================================= */ .expert-team-section, .expert-team-section * { box-sizing: border-box; } .expert-team-section img { max-width: 100%; } /* ========================================================= MAIN SECTION DESKTOP ========================================================= */ .expert-team-section { width: 100%; padding: 80px 50px 0px 50px; background: #F3F0EA; font-family: "DM Sans", sans-serif; color: #060517; } /* ========================================================= MAIN CONTAINER ========================================================= */ .expert-team-container { width: 100%; max-width: 1420px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .expert-team-header { width: 100%; max-width: 820px; margin-bottom: 55px; } /* ========================================================= LABEL ========================================================= */ .expert-team-label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 2px; color: #D05B37; } .expert-team-line { width: 42px; height: 1px; flex-shrink: 0; background: #D05B37; } /* ========================================================= MAIN HEADING ========================================================= */ .expert-team-header h2 { margin: 0 0 20px; font-family: "Cormorant Garamond", serif; font-size: 76px; line-height: 0.98; font-weight: 600; letter-spacing: -1.5px; color: #060517; } .expert-team-header h2 span { display: block; font-style: normal; font-weight: 500; color: #D05B37; } /* ========================================================= HEADER DESCRIPTION ========================================================= */ .expert-team-header p { max-width: 700px; margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.75; font-weight: 400; color: #625D58; } /* ========================================================= TEAM GRID DESKTOP ========================================================= */ .expert-team-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-bottom: 80px; } /* ========================================================= TEAM CARD ========================================================= */ .expert-team-card { width: 100%; min-width: 0; display: grid; grid-template-columns: 0.9fr 1.1fr; background: #FFFFFF; border: 1px solid var(--team-border); } /* ========================================================= REVERSE CARD DESKTOP ONLY ========================================================= */ .expert-team-card-reverse { grid-template-columns: 1.1fr 0.9fr; } /* ========================================================= TEAM IMAGE ========================================================= */ .expert-team-image { width: 100%; height: 460px; overflow: hidden; } .expert-team-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ========================================================= TEAM INFORMATION ========================================================= */ .expert-team-info { width: 100%; min-width: 0; padding: 36px 30px; display: flex; flex-direction: column; justify-content: space-between; } /* ========================================================= ROLE ========================================================= */ .expert-team-role { margin-bottom: 20px; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 1.5px; color: #D05B37; } /* ========================================================= NAME ========================================================= */ .expert-team-info h3 { margin: 0 0 16px; font-family: "Cormorant Garamond", serif; font-size: 44px; line-height: 1; font-weight: 600; color: #060517; } /* ========================================================= DESCRIPTION ========================================================= */ .expert-team-info p { margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.7; font-weight: 400; color: #625D58; } /* ========================================================= BOTTOM AREA ========================================================= */ .expert-team-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--team-border); } /* ========================================================= CATEGORY ========================================================= */ .expert-team-bottom > span { max-width: 60%; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 600; color: #D05B37; } /* ========================================================= VIEW PROFILE ========================================================= */ .expert-team-bottom a { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0.5px; color: #060517 !important; text-decoration: none !important; } /* ========================================================= LOCK ALL LINK STATES NO HOVER EFFECT ========================================================= */ .expert-team-bottom a:link, .expert-team-bottom a:visited, .expert-team-bottom a:hover, .expert-team-bottom a:active, .expert-team-bottom a:focus { color: #060517 !important; background: transparent !important; text-decoration: none !important; } /* ========================================================= PROFILE ARROW ========================================================= */ .expert-team-bottom a i { color: #D05B37; font-size: 14px; } /* ========================================================= TABLET 768px - 1100px IMAGE LEFT CONTENT RIGHT ONE CARD PER ROW ========================================================= */ @media (max-width: 1100px) and (min-width: 768px) { /* ===================================================== SECTION ===================================================== */ .expert-team-section { width: 100%; padding: 50px 30px 0px 30px; } /* ===================================================== CONTAINER ===================================================== */ .expert-team-container { width: 100%; max-width: 100%; } /* ===================================================== HEADER ===================================================== */ .expert-team-header { max-width: 760px; margin-bottom: 40px; } .expert-team-label { gap: 10px; margin-bottom: 15px; font-size: 14px; letter-spacing: 1.8px; } .expert-team-line { width: 32px; } .expert-team-header h2 { margin-bottom: 18px; font-size: 58px; line-height: 1; letter-spacing: -0.8px; } .expert-team-header p { max-width: 700px; font-size: 16px; line-height: 1.65; } /* ===================================================== TEAM GRID ===================================================== */ .expert-team-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 50px; } /* ===================================================== ALL CARDS IMAGE LEFT + CONTENT RIGHT ===================================================== */ .expert-team-card, .expert-team-card-reverse { width: 100%; min-width: 0; display: grid; grid-template-columns: 42% 58%; background: #FFFFFF; border: 1px solid var(--team-border); } /* ===================================================== FORCE REVERSE CARDS TO NORMAL TABLET ORDER ===================================================== */ .expert-team-card-reverse .expert-team-image { order: 1; } .expert-team-card-reverse .expert-team-info { order: 2; } /* ===================================================== IMAGE ===================================================== */ .expert-team-image { width: 100%; height: 360px; overflow: hidden; } .expert-team-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; } /* ===================================================== CONTENT ===================================================== */ .expert-team-info { width: 100%; min-width: 0; min-height: 360px; padding: 30px 28px; display: flex; flex-direction: column; justify-content: space-between; } /* ===================================================== ROLE ===================================================== */ .expert-team-role { margin-bottom: 15px; font-size: 14px; line-height: 1.4; letter-spacing: 1.3px; } /* ===================================================== NAME ===================================================== */ .expert-team-info h3 { margin: 0 0 14px; font-size: 40px; line-height: 1; letter-spacing: -0.3px; } /* ===================================================== DESCRIPTION ===================================================== */ .expert-team-info p { width: 100%; max-width: 100%; margin: 0; font-size: 16px; line-height: 1.65; } /* ===================================================== BOTTOM ===================================================== */ .expert-team-bottom { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--team-border); } .expert-team-bottom > span { max-width: 52%; font-size: 14px; line-height: 1.45; } .expert-team-bottom a { flex-shrink: 0; font-size: 16px; } } /* ========================================================= MOBILE 767px AND BELOW IMAGE TOP CONTENT BELOW ========================================================= */ @media (max-width: 767px) { .expert-team-section { width: 100%; padding: 30px 10px 0px 10px; } /* ===================================================== HEADER ===================================================== */ .expert-team-header { max-width: 100%; margin-bottom: 35px; } .expert-team-label { gap: 10px; margin-bottom: 13px; font-size: 16px; letter-spacing: 1.5px; } .expert-team-line { width: 32px; } .expert-team-header h2 { margin-bottom: 18px; font-size: 50px; line-height: 1; letter-spacing: -0.8px; } .expert-team-header p { max-width: 100%; font-size: 16px; line-height: 1.7; } /* ===================================================== GRID ===================================================== */ .expert-team-grid { width: 100%; grid-template-columns: 1fr; gap: 18px; padding-bottom: 30px; } /* ===================================================== CARDS ===================================================== */ .expert-team-card, .expert-team-card-reverse { width: 100%; display: flex; flex-direction: column; grid-template-columns: none; } /* ===================================================== IMAGE ===================================================== */ .expert-team-image { width: 100%; height: 360px; order: 1; } .expert-team-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* ===================================================== CONTENT ===================================================== */ .expert-team-info { width: 100%; min-height: auto; padding: 28px 22px; order: 2; } /* ROLE */ .expert-team-role { margin-bottom: 16px; font-size: 16px; letter-spacing: 1.2px; } /* NAME */ .expert-team-info h3 { margin-bottom: 14px; font-size: 38px; line-height: 1; } /* DESCRIPTION */ .expert-team-info p { font-size: 16px; line-height: 1.65; } /* ===================================================== BOTTOM ===================================================== */ .expert-team-bottom { width: 100%; align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 25px; padding-top: 17px; } .expert-team-bottom > span { max-width: 100%; font-size: 16px; } .expert-team-bottom a { font-size: 16px; } } /* ========================================================= SMALL MOBILE 380px AND BELOW ========================================================= */ @media (max-width: 380px) { .expert-team-section { padding: 25px 10px 0px 10px; } .expert-team-header { margin-bottom: 30px; } .expert-team-header h2 { font-size: 43px; } .expert-team-header p { font-size: 16px; line-height: 1.65; } .expert-team-image { height: 320px; } .expert-team-info { padding: 25px 20px; } .expert-team-role { font-size: 15px; } .expert-team-info h3 { font-size: 34px; } .expert-team-bottom { gap: 14px; } }/* End custom CSS */