:root{

--primary:#215C71;

--dark:#101c2b;

--light:#ffffff;

--text:#215C71;

--gray:#b4b4b4;

--border:#e8e3dd;

--radius:14px;

--transition:.35s;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

color:var(--text);

overflow-x:hidden;

background:#fff;

}

h1,
h2,
h3,
h4,
h5{

font-family:'Cormorant Garamond',serif;

font-weight:700;

color:#295f73;

}

a{

text-decoration:none;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

}

.section{

padding:110px 0;

}

.container-custom{

width:min(1720px,92%);

margin:auto;

}

.section-title-small{

font-size:13px;

letter-spacing:3px;

text-transform:uppercase;

font-weight:600;

margin-bottom:20px;

color:#b3aea8;

}

.btn-main{

background:var(--primary);

color:#fff;

padding:14px 34px;

border-radius:6px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

font-size:13px;

transition:.3s;

}

.btn-main:hover{

background:#244e5c;

color:#fff;

}

.btn-outline-main{

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

color:var(--primary);

padding:14px 34px;

border-radius:6px;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

}

.btn-outline-main:hover{

background:var(--primary);

color:#fff;

}
/*==========================
HEADER
==========================*/

#header{

position:fixed;

top:0;

left:0;

width:100%;

height:350px;

background:#141f2d;

z-index:9999;

transition:.35s;

}

#header.sticky{

box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.header-container{

    max-width:1600px;

    height:100%;

    margin:auto;

    padding:0 45px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    flex-shrink:0;
}

.logo img{

    width:400px;
    height:300px;
    /* object-fit:cover; */

}

.desktop-menu{

    margin-left:60px;
}

.header-right{

    margin-left:auto;
    height: 100%;
    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:12px;

}

/* .header-right a{
    margin-top: 72px;
} */
.account-links{

    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    color:#fff;
    /* margin-bottom: 72px; */
    padding-top: 54px;
    padding-bottom: 132px;

}

.account-links a{

    color:#fff;
    text-decoration:none;
    transition:.3s;

}

.account-links a:hover{

    color:var(--primary);

}

.account-links{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    color:#fff;

}

.account-links a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.account-links a:hover{

    color:var(--primary);

}

.mobile-account{

    margin:25px 0;

    text-align:center;

}

.mobile-account p{

    margin-bottom:10px;

}

.mobile-account a{

    color:var(--primary);

    font-weight:600;

}

/*==========================

LOGO

==========================*/

/* .logo-text{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:"Playfair Display", serif;
    font-size:22px;
    font-weight:700;
    letter-spacing:0.02em;
    white-space:nowrap;
}

.logo-main{
    color:#fff;
}

.logo-property{
    color:#b4b4b4;
}
.logo-break{
    display:none;
} */
/* .logo{

    font-family: "Playfair Display", serif;

    font-size:20px;

    font-weight:700;

    color:white;

    letter-spacing: 0.02em;

    white-space:nowrap;

} */

/*==========================

MENU

==========================*/

.desktop-menu{

flex:none;

/* display:flex; */

justify-content:center;

}

.desktop-menu ul{

    display:flex;

    gap:48px;

    list-style:none;

    margin:0;

    padding:170px 0 0 0;

    align-items:center;

    justify-content:flex-start;   /* Không center */

  
}


.desktop-menu a{

font-size:13px;

letter-spacing:2px;

font-weight:600;

color:rgba(255, 255, 255, 0.65);

position:relative;

}

.desktop-menu a:hover{

color:white;

}

.desktop-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:white;

transition:.3s;

}

.desktop-menu a:hover::after{

width:100%;

}

/*==========================

BUTTON

==========================*/

.header-right{

display:flex;

align-items:center;

gap:25px;

}

.btn-offer{

width:190px;

height:40px;

display:flex;

align-items:center;

justify-content:center;

background:#d9d4cf;

color:#2e667a;

border-radius:6px;

font-size:13px;

font-weight:600;

letter-spacing:2px;

transition:.3s;

}

.btn-offer:hover{

background:white;

}

/*==========================

HAMBURGER

==========================*/

.menu-toggle{

display:none;

background:none;

border:none;

cursor:pointer;

}

.menu-toggle span{

display:block;

width:28px;

height:2px;

background:white;

margin:6px 0;

transition:.3s;

}

/*==========================

MOBILE MENU

==========================*/
.btn-offer-mobile{

    display:none;

}
.mobile-overlay{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9998;

}

.mobile-overlay.active{

opacity:1;

visibility:visible;

}

.mobile-menu{

position:fixed;

right:-320px;

top:0;

width:320px;

height:100vh;

background:#141f2d;

padding:30px;

transition:.35s;

z-index:9999;

display:flex;

flex-direction:column;

}

.mobile-menu.active{

right:0;

}

.mobile-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}

.mobile-header span{

color:white;

letter-spacing:2px;

font-size:13px;

}

.mobile-header button{

background:none;

border:none;

color:white;

font-size:24px;

}

.mobile-menu ul{

list-style:none;

padding:0;

margin:0;

}

.mobile-menu li{

margin-bottom:25px;

}

.mobile-menu a{

color:rgba(255, 255, 255, 0.65);

letter-spacing:2px;

font-size:14px;

font-weight:600;

}

.mobile-btn{

margin-top:40px;

width:100%;

}


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

.container-wrapper {
    max-width: 1320px;
    margin: 0 auto;
}

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

.about{

    padding:140px 0;
    background:#ffffff;

}

.about-wrapper{

    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:40px;
    align-items:start;

}

/* LEFT */

.about-left{

    max-width:680px;

}

.section-subtitle{

    display:inline-block;

    margin-bottom:18px;

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--gray);

}

.section-title{

    margin-bottom:30px;

    font-family: "Playfair Display", serif;

    font-size:50px;

    line-height: 1.2;

    color:var(--primary);

}

.section-title span{

    color:#bcb6b2;

    font-style:italic;

    font-weight:400;

}

.about-left p{

    margin-bottom:30px;

    font-size:16px;

    line-height:2;

    color:rgb(33, 92, 113);

}

/* RIGHT */

.about-right{

    width:600px;
    margin-left:auto;

}

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

.quote-box{

    position:relative;

    overflow:hidden;

    background:#2f6d81;

    border-radius:6px;

    padding:44px;
    
    min-height:200px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

/* Circle */

.quote-box::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    right:-90px;

    top:-70px;

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

}

/* Decorative Line */

/* .quote-box::before{

    content:"";

    position:absolute;

    left:55px;

    right:55px;

    bottom:75px;

    height:1px;

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

} */

.quote-box p{

    position:relative;

    z-index:2;

    margin:0;

    font-family: "Playfair Display", serif;

    font-size:24px;

    line-height:1.2;

    color:#fff;

    font-style:italic;

    padding-bottom: 24px;

}

.quote-box span{

    position:relative;

    z-index:2;

    font-size:12px;

    letter-spacing:1px;

    color:var(--gray);

    text-transform: uppercase;

}

/*==========================
CARD
==========================*/

.about-card{

    margin-top:16px;

    background:var(--gray);

    border-radius:6px;

    padding:35px;

}

.about-card h3{

    margin-bottom:8px;

    font-family: "Playfair Display", serif;

    font-size:24x;

    color:#2d6577;

}

.about-card p{

    margin:0;

    color:#406d7d;

    font-size:12px;

    line-height:1.6;

}

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

.quote-box,
.about-card{

    transition:.35s;

}

.quote-box:hover{

    transform:translateY(-8px);

}

.about-card:hover{

    transform:translateY(-8px);

}

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

.about-left p:last-child{

    margin-bottom:0;

}

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

.principles{

    padding:140px 0;

    background:#F7F3EE;

}

.principles .section-title{

    max-width:650px;

    margin-bottom:70px;

}

.principles-grid{

    display:grid;

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

    border:1px solid #E4DDD6;

    border-radius:8px;

    overflow:hidden;


}

.principle-card{

    padding:42px;

    min-height:360px;

    transition:.35s;

}

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

    border-right:1px solid #E4DDD6;

}

.principle-card:hover{

    background:#fcfaf8;

}

.principle-icon{

    width:54px;

    height:54px;

    border:1px solid #CFC7C0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:35px;

    color:#A7A09A;

    font-size:22px;

}

.principle-card h3{

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    color:#2C6577;

    margin-bottom:24px;

}

.principle-card p{

    font-size:14px;

    line-height:1.9;

    color:#4F6F7A;

    margin:0;

}

/*=========================================
NETWORK
==========================================*/

.network{

    background:#2E6679;

    padding:140px 0;

}

.network .section-subtitle{

    color:rgba(255, 255, 255, 0.4);

}

.network .section-title{

    color:#fff;

    margin-bottom:50px;

}

.network .gray{

    color:var(--gray);

}

.network-wrapper{

    display:grid;

    grid-template-columns:680px 600px;

    justify-content:space-between;

    align-items:center;

    gap:90px;

}

.network-left p{

    color:rgba(255, 255, 255, 0.55);;

    font-size:16px;

    line-height:2;

    margin-bottom:28px;

}

.network-left strong{

    color:#fff;

}

.network-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:40px;

}

.network-tags a{

    color:rgba(255, 255, 255, 0.55);

    border:1px solid rgba(201, 151, 58, 0.4);

    text-decoration:none;

    padding:8px 18px;

    font-size:12px;

    letter-spacing:1px;

    transition:.3s;

}

.network-tags a:hover{

    background:#fff;

    color:#2E6679;

}

.network-stats{

    display:grid;

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

    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    border-radius:6px;

}

.network-item{

    padding:30px 38px;

    min-height:180px;

    border:1px solid rgba(255,255,255,0.03);

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

}
.network-item:hover{
    background: rgba(255, 255, 255, 0.06);
}
.network-item h3{

    font-family: "Playfair Display", serif;

    font-size:34px;

    color:var(--gray);

    margin-bottom:12px;

}

.network-item span{

    color:rgba(255, 255, 255, 0.4);

    font-size:12px;

    line-height:1.8;

}

/*====================================
WHY US
=====================================*/

.why-us{

    padding:140px 0;

    background:#fff;

}

.why-wrapper{

    display:grid;

    grid-template-columns:640px 640px;

    justify-content:space-between;

    align-items:center;

    gap:90px;

}

.why-description{

    font-size:18px;

    color:#33687A;

    line-height:1.8;

    margin:40px 0 55px;

}

.why-list{

    display:flex;

    flex-direction:column;

    gap:40px;

}

.why-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

}

.why-icon{

    width:60px;

    height:60px;

    background:#E8E2D9;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#A7A09A;

    font-size:28px;

    flex-shrink:0;

}

.why-item h4{

    color:#2F6678;

    font-size:20px;

    margin-bottom:10px;

    font-weight: 500;
    font-family: 'Times New Roman', Times, serif;

}

.why-item p{

    color:var(--primary);

    font-size:14px;

    margin:0;

    line-height:1.8;

}

.why-right{

    display:flex;

    justify-content:center;

}

.why-image{

    width:100%;

    border-radius:12px;

    object-fit:cover;

}

/*==========================
TESTIMONIAL
==========================*/

.testimonials{

    padding:140px 0;
    background:#F8F4EE;

}

.testimonial-list{

    display:flex;

    gap:28px;

    overflow-x:auto;

    padding:50px 0 20px;

    scroll-snap-type:x mandatory;

    scrollbar-width:thin;

}

.testimonial-list::-webkit-scrollbar{

    height:8px;

}

.testimonial-list::-webkit-scrollbar-track{

    background:#E5DED7;
    border-radius:20px;

}

.testimonial-list::-webkit-scrollbar-thumb{

    background:#B8B3AE;
    border-radius:20px;

}

.testimonial-card{

    flex:0 0 430px;

    background:#fff;

    border:1px solid #E7DDD3;

    border-radius:10px;

    padding:36px;

    scroll-snap-align:start;

    transition:.3s;

}

.testimonial-card:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.testimonial-top{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:28px;

}

.avatar{

    width:60px;
    height:60px;

    border-radius:50%;

    background:#EEE5DC;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:28px;

    font-weight:700;

    color:#AAA19A;

}

.testimonial-top h4{

    margin:0;

    color:#2F6678;

    font-size:24px;

}

.testimonial-top span{

    color:#BFB8B1;

    font-size:16px;

}

.testimonial-card p{

    color:#666;

    line-height:1.9;

    margin:0;

    min-height:130px;

}

.stars{

    margin-top:24px;

    font-size:18px;

    color:#B6B6B6;

    letter-spacing:4px;

}

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

.cta{

    padding:140px 0;

    background:var(--gray);

}

.cta-box{

    max-width:760px;

    margin:auto;

    text-align:center;

}
.section-subtitle-custom{
    color: var(--primary);
    opacity: 0.5;
    font-weight: 500;
}
.cta-title{

    margin-top:18px;

    margin-bottom:30px;

    font-size:60px;

    line-height:1.05;

    color:var(--primary);

    font-family: "Playfair Display", serif;

}

.cta-desc{

    max-width:650px;

    margin:0 auto 55px;

    font-size:18px;

    line-height:1.8;

    color:rgba(13, 27, 42, 0.65);

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;

}
.btn-main{

    transition:.35s;

}

.btn-main:hover{

    background:#214b59;

    color:#fff;

}

.btn-outline-main{

    transition:.35s;
    color: var(--primary);
    border: 1.5px solid var(--primary);

}

.btn-outline-main:hover{

    background:#2F6679;

    color:#fff;

}

/*=========================
FOOTER
==========================*/

.footer{

    background:#081019;

    padding:48px 0;

}

.footer-wrapper{

    display:flex;

    justify-content:space-between;

    /* align-items:center; */

    gap:50px;

}

.footer-logo{

    font-family:'Playfair Display',serif;

    font-size:22px;

    color:#b4b4b4;

    text-decoration:none;

}

.footer-logo span{
    color: rgba(255, 255, 255, 0.4);
}

.footer-center{

    color:#8E8E8E;

    line-height:2;

}

.footer-center p{

    margin:0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;

}

.footer-center a{

    color:rgba(255, 255, 255, 0.6);

    text-decoration:none;

    font-weight:600;

    font-size: 16px;

}

.footer-right{

    max-width:440px;

    text-align:right;

    color:rgba(255, 255, 255, 0.2);

    font-size:16px;

    line-height:1.8;

}
.powered-by{
    display:block;
    margin-top:6px;
    margin-bottom: 6px;
    font-size:12px;
    color:#A5A5A5;
    letter-spacing:.5px;
}

.powered-by strong{
    color:#fff;
    font-weight:600;
}
.all-rights{
    margin-top: 28px;
}
.business-registration {
    margin: 8px 0 0;
    font-size: 16px;
    color: #777;
}

.business-registration span {
    color: #555;
}

.footer-address {
    margin-bottom: 8px;
}
.footer-address span{
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}
.footer-right .footer-links {
    margin: 0 10px;
}

.footer-right .footer-links a {
    color: inherit;
    text-decoration: none;
}

.footer-right .footer-links a:hover {
    text-decoration: underline;
}
.policy-container,.terms-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 400px 20px 30px 20px;
    font-size: 18px;
    text-align: justify;
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
} 


/*==========================================
OFFER MODAL
==========================================*/
.s-44{
    font-size: 44px;
}
.offer-overlay{

    /* position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);

    display:none;
    justify-content:center;
    align-items:center;

    padding:30px;

    z-index:9999; */
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.55);

    z-index:99999;

}

.offer-overlay.active{

    display:flex;

}

.offer-modal{

    position:relative;

    width:100%;
    max-width:760px;

    background:#F7F3EE;

    border-radius:10px;

    padding:55px;

    overflow-y:auto;

    max-height:92vh;

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

}

.offer-close{

    position:absolute;

    right:25px;

    top:18px;

    border:none;

    background:none;

    color:var(--primary);

    font-size:42px;

    cursor:pointer;

    line-height:1;

    transition:.3s;

}

.offer-close:hover{

    transform:rotate(90deg);

}

.offer-desc{

    margin:28px 0 42px;

    color:#5F6770;

    font-size:16px;

    line-height:1.8;

}

.offer-modal form{

    display:flex;

    flex-direction:column;

    gap:26px;

}

.form-row{

    display:grid;

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

    gap:24px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:10px;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    border:1px solid #DDD4CA;

    background:#fff;

    border-radius:6px;

    padding:15px 18px;

    outline:none;

    font-size:15px;

    color:#333;

    transition:.3s;

}

.form-group textarea{

    resize:none;

    min-height:150px;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#2E6679;

    box-shadow:0 0 0 3px rgba(46,102,121,.1);

}

.offer-submit{

    width:100%;

    height:56px;

    border:none;

    border-radius:6px;

    background:#2E6679;

    color:#fff;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.offer-submit:hover{

    background:#255666;

}

.offer-note{

    text-align:center;

    color:#66727A;

    font-size:13px;

    line-height:1.8;

}
/* ------Team------ */
.team-address,
.team-direct,
.team-email {
    margin: 0 0 6px;
}

.team-address {
    font-style: normal;
    margin-top: 12px;
}

.team-email {
    color: #2563eb;
    line-height: 1.4;
    overflow-wrap: anywhere;
    margin-top: 6px;
    margin-bottom: 6px;
}
.team-content{
    display:flex;
    flex-direction:column;
}

.team-desc{
    overflow:hidden;
    transition:max-height .4s ease;
    line-height:1.8;
    color:var(--primary);
}

.team-desc.collapsed{
    max-height:170px;
}

.team-desc.expanded{
    max-height:1000px;
}

.team-read-more{
    margin-top:18px;
    display:inline-block;
    font-size:14px;
    font-weight:600;
    color:var(--primary);
    text-decoration:none;
    cursor:pointer;
    transition:.3s;
}

.team-read-more:hover{
    opacity:.75;
}


/* .hero-left,
.hero-right,
.about-left,
.about-right,
.network-left,
.network-right,
.why-left,
.why-right{

    min-width:0;

} */
/* *{
    outline:1px solid red;
} */