.elementor-2389 .elementor-element.elementor-element-5e626a0{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-d110468 *//*==================================================
BALLISTALUXURY ABOUT PAGE
PART 1
GLOBAL STYLE
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');


:root{

--black:#111111;
--text:#666666;
--border:#ECECEC;
--light:#F8F8F8;
--white:#FFFFFF;

--container:1280px;

--transition:.35s ease;

}


/*==================================================
RESET
==================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

font-size:16px;

font-weight:400;

line-height:1.9;

background:#fff;

color:#111;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

text-rendering:optimizeLegibility;

}

img{

display:block;

width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}

ul{

list-style:none;

}


/*==================================================
CONTAINER
==================================================*/

.container{

width:92%;

max-width:1280px;

margin:auto;

}


/*==================================================
SECTION
==================================================*/

section{

padding:130px 0;

}


/*==================================================
TYPOGRAPHY
==================================================*/

.section-tag{

display:inline-block;

font-size:12px;

font-weight:600;

letter-spacing:4px;

text-transform:uppercase;

color:#888;

margin-bottom:22px;

}

.title{

text-align:center;

margin-bottom:90px;

}

.title h2{

font-family:'Cormorant Garamond',serif;

font-size:68px;

font-weight:500;

line-height:1.08;

letter-spacing:-1px;

color:#111;

margin-top:10px;

}

h1,
h2,
h3,
h4{

font-family:'Cormorant Garamond',serif;

font-weight:500;

color:#111;

}

h3{

font-size:42px;

line-height:1.2;

}

p{

font-size:17px;

line-height:2;

color:#666;

margin-bottom:22px;

}


/*==================================================
BUTTON
==================================================*/

.hero a,
.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 44px;

border:1px solid #111;

background:#fff;

color:#111;

font-size:13px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

transition:var(--transition);

cursor:pointer;

}

.hero a:hover,
.primary-btn:hover{

background:#111;

color:#fff;

}


/*==================================================
COMMON GRID
==================================================*/

.about-wrapper,
.principles-grid,
.stats-grid{

display:grid;

gap:60px;

}


/*==================================================
COMMON SPACING
==================================================*/

.about,
.philosophy,
.commitment,
.journey,
.why-us,
.statistics,
.promise,
.quote-section,
.cta{

position:relative;

}


/*==================================================
LUXURY DIVIDER
==================================================*/

.title::after{

content:"";

display:block;

width:70px;

height:1px;

background:#111;

margin:28px auto 0;

opacity:.15;

}


/*==================================================
SELECTION
==================================================*/

::selection{

background:#111;

color:#fff;

}


/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#f6f6f6;

}

::-webkit-scrollbar-thumb{

background:#111;

}


/*==================================================
SMOOTH HOVER
==================================================*/

a,
.primary-btn,
.hero a{

transition:.35s ease;

}


/*==================================================
ANIMATION
==================================================*/

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(45px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*==================================================
HERO
==================================================*/

.hero{

min-height:92vh;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

border-bottom:1px solid var(--border);

}

.hero .container{

max-width:950px;

text-align:center;

}

.hero-content{

animation:fadeUp .9s ease;

}

.hero span{

display:inline-block;

font-size:12px;

font-weight:600;

letter-spacing:6px;

text-transform:uppercase;

color:#888;

margin-bottom:30px;

}

.hero h1{

font-size:92px;

font-weight:500;

line-height:0.95;

letter-spacing:-2px;

margin-bottom:35px;

max-width:900px;

margin-left:auto;

margin-right:auto;

}

.hero p{

max-width:720px;

margin:auto;

font-size:18px;

line-height:2;

color:#666;

margin-bottom:55px;

}

.hero a{

min-width:220px;

height:60px;

border:1px solid #111;

display:inline-flex;

align-items:center;

justify-content:center;

font-size:13px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

background:#fff;

color:#111;

transition:.35s ease;

}

.hero a:hover{

background:#111;

color:#fff;

transform:translateY(-3px);

box-shadow:0 18px 40px rgba(0,0,0,.08);

}

/*=========================================
Luxury Bottom Divider
=========================================*/

.hero::after{

content:"";

position:absolute;

bottom:0;

left:50%;

transform:translateX(-50%);

width:90px;

height:1px;

background:#ddd;

}

/*=========================================
Large Desktop
=========================================*/

@media(min-width:1600px){

.hero h1{

font-size:110px;

}

.hero p{

font-size:20px;

max-width:820px;

}

}

/*=========================================
Tablet
=========================================*/

@media(max-width:991px){

.hero{

min-height:75vh;

padding:120px 0;

}

.hero h1{

font-size:62px;

line-height:1.05;

}

.hero p{

font-size:17px;

max-width:620px;

}

}

/*=========================================
Mobile
=========================================*/

@media(max-width:576px){

.hero{

min-height:70vh;

padding:100px 0;

}

.hero span{

letter-spacing:3px;

font-size:11px;

}

.hero h1{

font-size:42px;

line-height:1.12;

letter-spacing:-1px;

margin-bottom:25px;

}

.hero p{

font-size:15px;

line-height:1.9;

margin-bottom:35px;

}

.hero a{

width:100%;

max-width:260px;

height:54px;

font-size:12px;

}

}


/*==================================================
ABOUT
==================================================*/

.about{

background:#fff;

}

.about-wrapper{

display:grid;

grid-template-columns:420px 1fr;

gap:120px;

align-items:flex-start;

}

.about-wrapper h3{

font-size:56px;

line-height:1.08;

font-weight:500;

position:sticky;

top:120px;

}

.about-wrapper p{

font-size:18px;

line-height:2.1;

color:#666;

max-width:720px;

}

.about-wrapper p:last-child{

margin-bottom:0;

}


/*==================================================
PHILOSOPHY
==================================================*/

.philosophy{

background:#fafafa;

border-top:1px solid #eee;

border-bottom:1px solid #eee;

}

.philosophy-content{

max-width:900px;

margin:auto;

text-align:center;

}

.philosophy-content p{

font-size:26px;

font-family:'Cormorant Garamond',serif;

font-weight:400;

line-height:1.7;

color:#222;

margin-bottom:35px;

}

.philosophy-content p:last-child{

font-family:'Inter',sans-serif;

font-size:18px;

color:#666;

line-height:2;

max-width:760px;

margin:auto;

}


/*==================================================
COMMITMENT
==================================================*/

.commitment{

background:#fff;

}

.commitment-box{

max-width:900px;

margin:auto;

text-align:center;

padding:80px 70px;

border:1px solid #ECECEC;

transition:.35s ease;

}

.commitment-box:hover{

border-color:#111;

transform:translateY(-6px);

box-shadow:0 25px 60px rgba(0,0,0,.04);

}

.commitment-box span{

display:inline-block;

font-size:12px;

font-weight:600;

letter-spacing:4px;

text-transform:uppercase;

color:#888;

margin-bottom:22px;

}

.commitment-box h2{

font-size:62px;

line-height:1.08;

margin-bottom:30px;

}

.commitment-box p{

font-size:18px;

line-height:2;

color:#666;

max-width:700px;

margin:auto;

}


/*==================================================
SECTION TRANSITIONS
==================================================*/

.about::after,
.commitment::before{

content:"";

display:block;

width:80px;

height:1px;

background:#ddd;

margin:90px auto 0;

}


/*==================================================
TABLET
==================================================*/

@media(max-width:991px){

.about-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.about-wrapper h3{

position:static;

font-size:44px;

}

.philosophy-content p{

font-size:22px;

}

.commitment-box{

padding:60px 40px;

}

.commitment-box h2{

font-size:46px;

}

}


/*==================================================
MOBILE
==================================================*/

@media(max-width:576px){

.about-wrapper{

gap:35px;

}

.about-wrapper h3{

font-size:34px;

}

.about-wrapper p{

font-size:16px;

line-height:1.9;

}

.philosophy-content p:first-child{

font-size:18px;

}

.philosophy-content p:last-child{

font-size:16px;

}

.commitment-box{

padding:35px 25px;

}

.commitment-box h2{

font-size:34px;

}

.commitment-box p{

font-size:16px;

}

}


/*==================================================
OUR PRINCIPLES
==================================================*/

.principles{

background:#ffffff;

}

.principles-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:45px;

margin-top:70px;

}

.principle{

padding:0 20px;

text-align:center;

position:relative;

}

.principle:not(:last-child)::after{

content:"";

position:absolute;

right:-22px;

top:50%;

transform:translateY(-50%);

width:1px;

height:120px;

background:#ececec;

}

.principle .number{

font-family:'Cormorant Garamond',serif;

font-size:70px;

font-weight:300;

color:#d9d9d9;

margin-bottom:20px;

}

.principle h3{

font-size:34px;

margin-bottom:18px;

font-weight:500;

}

.principle p{

max-width:320px;

margin:auto;

font-size:17px;

line-height:2;

color:#666;

}



/*==================================================
OUR JOURNEY
==================================================*/

.journey{

background:#fafafa;

border-top:1px solid #efefef;

border-bottom:1px solid #efefef;

}

.journey-wrapper{

max-width:980px;

margin:auto;

margin-top:70px;

}

.journey-item{

display:grid;

grid-template-columns:180px 1fr;

gap:50px;

padding:45px 0;

border-bottom:1px solid #ececec;

}

.journey-item:last-child{

border-bottom:none;

}

.journey-year{

font-family:'Cormorant Garamond',serif;

font-size:42px;

font-weight:500;

color:#111;

}

.journey-content h3{

font-size:36px;

margin-bottom:15px;

}

.journey-content p{

font-size:17px;

line-height:2;

color:#666;

max-width:650px;

}



/*==================================================
WHY BALLISTALUXURY
==================================================*/

.why-us{

background:#fff;

}

.why-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

margin-top:70px;

}

.why-box{

padding:45px;

border:1px solid #ececec;

transition:.35s ease;

background:#fff;

}

.why-box:hover{

border-color:#111;

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.04);

}

.why-box h3{

font-size:32px;

margin-bottom:18px;

font-weight:500;

}

.why-box p{

font-size:17px;

line-height:2;

color:#666;

}



/*==================================================
SECTION DIVIDER
==================================================*/

.principles::after,

.why-us::before{

content:"";

display:block;

width:90px;

height:1px;

background:#dddddd;

margin:100px auto 0;

}



/*==================================================
TABLET
==================================================*/

@media(max-width:991px){

.principles-grid{

grid-template-columns:1fr;

gap:60px;

}

.principle:not(:last-child)::after{

display:none;

}

.journey-item{

grid-template-columns:1fr;

gap:20px;

}

.why-grid{

grid-template-columns:1fr;

}

}



/*==================================================
MOBILE
==================================================*/

@media(max-width:576px){

.principle .number{

font-size:52px;

}

.principle h3{

font-size:28px;

}

.principle p{

font-size:16px;

}

.journey-year{

font-size:30px;

}

.journey-content h3{

font-size:28px;

}

.journey-content p{

font-size:16px;

}

.why-box{

padding:30px;

}

.why-box h3{

font-size:28px;

}

.why-box p{

font-size:16px;

}

}


/*==================================================
STATISTICS
==================================================*/

.statistics{

background:#111111;

padding:140px 0;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:60px;

text-align:center;

}

.stat{

position:relative;

}

.stat:not(:last-child)::after{

content:"";

position:absolute;

right:-30px;

top:50%;

transform:translateY(-50%);

width:1px;

height:80px;

background:rgba(255,255,255,.12);

}

.stat h2{

font-family:'Cormorant Garamond',serif;

font-size:72px;

font-weight:500;

color:#fff;

line-height:1;

margin-bottom:18px;

}

.stat p{

font-size:13px;

letter-spacing:3px;

text-transform:uppercase;

color:#BDBDBD;

margin:0;

}



/*==================================================
PROMISE
==================================================*/

.promise{

background:#fff;

padding:140px 0;

}

.promise-content{

max-width:900px;

margin:auto;

text-align:center;

}

.promise-content h2{

font-size:64px;

line-height:1.1;

margin:20px 0 35px;

}

.promise-content p{

font-size:18px;

line-height:2;

max-width:760px;

margin:auto;

color:#666;

}



/*==================================================
QUOTE
==================================================*/

.quote-section{

background:#fafafa;

border-top:1px solid #ececec;

border-bottom:1px solid #ececec;

padding:140px 0;

}

.quote-section blockquote{

max-width:900px;

margin:auto;

font-family:'Cormorant Garamond',serif;

font-size:46px;

font-weight:400;

line-height:1.5;

text-align:center;

color:#111;

font-style:normal;

}

.quote-section blockquote::before{

content:"“";

display:block;

font-size:90px;

line-height:1;

color:#d6d6d6;

margin-bottom:25px;

}



/*==================================================
CTA
==================================================*/

.cta{

background:#fff;

text-align:center;

padding:150px 0;

}

.cta h2{

font-size:72px;

line-height:1.05;

margin:18px 0 30px;

}

.cta p{

font-size:18px;

max-width:720px;

margin:auto;

margin-bottom:45px;

line-height:2;

color:#666;

}

.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 48px;

border:1px solid #111;

background:#fff;

color:#111;

font-size:13px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

transition:.35s;

}

.primary-btn:hover{

background:#111;

color:#fff;

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(0,0,0,.08);

}



/*==================================================
SECTION DIVIDER
==================================================*/

.promise::before,

.cta::before{

content:"";

display:block;

width:90px;

height:1px;

background:#ddd;

margin:0 auto 90px;

}



/*==================================================
TABLET
==================================================*/

@media(max-width:991px){

.stats-grid{

grid-template-columns:repeat(2,1fr);

gap:50px;

}

.stat:nth-child(2)::after{

display:none;

}

.stat::after{

display:none;

}

.promise-content h2{

font-size:46px;

}

.quote-section blockquote{

font-size:34px;

}

.cta h2{

font-size:46px;

}

}



/*==================================================
MOBILE
==================================================*/

@media(max-width:576px){

.statistics{

padding:90px 0;

}

.stats-grid{

grid-template-columns:1fr;

gap:45px;

}

.stat h2{

font-size:52px;

}

.promise{

padding:90px 0;

}

.promise-content h2{

font-size:34px;

}

.promise-content p{

font-size:16px;

}

.quote-section{

padding:90px 0;

}

.quote-section blockquote{

font-size:26px;

}

.quote-section blockquote::before{

font-size:60px;

margin-bottom:15px;

}

.cta{

padding:100px 0;

}

.cta h2{

font-size:36px;

}

.cta p{

font-size:16px;

margin-bottom:35px;

}

.primary-btn{

width:100%;

max-width:260px;

height:56px;

}

}

/*==================================================
BALLISTALUXURY
PART 6
FINAL POLISH
==================================================*/

/*==========================
SMOOTH FADE
==========================*/

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.hero-content,
.about-wrapper,
.philosophy-content,
.commitment-box,
.principle,
.journey-item,
.why-box,
.stat,
.promise-content,
.quote-section blockquote,
.cta{

animation:fadeUp .9s ease both;

}

/*==========================
HOVER
==========================*/

.principle,
.why-box,
.commitment-box{

transition:.35s ease;

}

.principle:hover{

transform:translateY(-8px);

}

.journey-item{

transition:.35s ease;

}

.journey-item:hover{

padding-left:12px;

}

.hero a,
.primary-btn{

transition:.35s ease;

}

.hero a:hover,
.primary-btn:hover{

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(0,0,0,.08);

}


/*==========================
SECTION GAP
==========================*/

.hero{

padding-top:120px;

padding-bottom:120px;

}

.about,
.philosophy,
.commitment,
.principles,
.journey,
.why-us,
.statistics,
.promise,
.quote-section,
.cta{

padding-top:140px;

padding-bottom:140px;

}


/*==========================
READABILITY
==========================*/

.about p,
.promise p,
.why-box p,
.journey-content p,
.commitment p{

max-width:720px;

}

.philosophy p{

max-width:820px;

margin:auto;

}


/*==========================
LUXURY LINES
==========================*/

.title{

position:relative;

}

.title::before{

content:"";

display:block;

width:50px;

height:1px;

background:#111;

margin:auto;

margin-bottom:25px;

opacity:.15;

}


/*==========================
SELECTION
==========================*/

::selection{

background:#111;

color:#fff;

}


/*==========================
FOCUS
==========================*/

a:focus,
button:focus{

outline:none;

}


/*==========================
TABLET
==========================*/

@media(max-width:991px){

section{

padding:90px 0;

}

.title{

margin-bottom:60px;

}

.title h2{

font-size:48px;

}

.hero h1{

font-size:56px;

}

.about-wrapper{

gap:45px;

}

}


/*==========================
MOBILE
==========================*/

@media(max-width:576px){

section{

padding:70px 0;

}

.title{

margin-bottom:45px;

}

.title h2{

font-size:34px;

line-height:1.15;

}

.section-tag{

font-size:11px;

letter-spacing:3px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.about-wrapper h3{

font-size:30px;

}

.principle{

padding:0;

}

.journey-item{

padding:28px 0;

}

.cta h2{

font-size:34px;

}

.promise-content h2{

font-size:34px;

}

.quote-section blockquote{

font-size:24px;

line-height:1.6;

}

}


/*==========================
DESKTOP
==========================*/

@media(min-width:1400px){

.container{

max-width:1320px;

}

.hero h1{

font-size:100px;

}

.title h2{

font-size:72px;

}

.about-wrapper h3{

font-size:62px;

}

}/* End custom CSS */