:root {
    --white         : #ffffff;
    --black         : #000000; 
    --pink          : #c658a1;
    --pink2         : #d2c6d2;
    --yellow        : #f5c944;
    --dark-blue     : #233d64;
    --light-blue    : #8ad1c7;
    --oxford-blue   : #1d2536;
    --grey1         : #b0b0b0;
    --grey2         : #f5f5f5;
    --grey3         : #b0b0b0;
    --grey4         : #393939;
    --grey5         : #e8e8e8;
    --grey6         : #888888;
    --grey7         : #DFE6EC;
    --grey8         : #A3A3A3;
    --grey9         : #616161;
    --grey10         : #FCFCFC; 
    --grey11         : #404040; 
    --grey12         : #474747; 
    --grey12         : #474747; 
    --grey12         : #121212; 
}

html {
    scroll-behavior: smooth;
}


body {
    font-family: 'inter-r';
}


a:hover {
   
    transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'inter-b' !important;
}

.clear-both {
    clear: both;
}

p {
    color: var(--grey4);
}

a {
    font-family: 'inter-r';
}

.c-white { color: var(--white) !important; }
.c-black { color: var(--black) !important; }
.c-pink { color: var(--pink) !important; }
.c-yellow { color: var(--yellow) !important; }
.c-dark-blue { color: var(--dark-blue) !important; }
.c-light-blue { color: var(--light-blue) !important; }
.c-oxford-blue { color: var(--oxford-blue) !important; }
.c-grey1 { color: var(--grey1) !important; }
.c-grey2 { color: var(--grey2) !important; }
.c-grey3 { color: var(--grey3) !important; }
.c-grey4 { color: var(--grey4) !important; }
.c-grey6 { color: var(--grey6) !important; }
.c-grey8 { color: var(--grey8) !important; }
.c-grey9 { color: var(--grey9) !important; }
.c-grey12 { color: var(--grey12) !important; }

.bg-white { background-color: var(--white) !important; }
.bg-black { background-color: var(--black) !important; }
.bg-pink { background-color: var(--pink) !important; }
.bg-yellow { background-color: var(--yellow) !important; }
.bg-dark-blue { background-color: var(--dark-blue) !important; }
.bg-light-blue { background-color: var(--light-blue) !important; }
.bg-oxford-blue { background-color: var(--oxford-blue) !important; }
/* .bg-grey1 { background-color: var(--grey1) !important; } */
.bg-grey2 { background-color: var(--grey2) !important; }
.bg-grey3 { background-color: var(--grey3) !important; }
.bg-grey4 { background-color: var(--grey4) !important; }


.d-flex {display: flex;}
.d-inline-block {display: inline-block;}
.d-block {display: block;}
.d-none {display: none;}

/* .border-bottom-grey1 {
    border-bottom: 1px solid var(--grey1);
} */

.border-bottom-grey7 {
    border-bottom: 1px solid var(--grey7);
}

/* --------------- MAIN COPM ---------------- */

.container {
    width: 91%;
    margin: 0 auto;
    max-width: 1920px;
}

.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt35 {margin-top: 35px;}
.mt40 {margin-top: 40px;}
.mt45 {margin-top: 45px;}
.mt50 {margin-top: 50px;}
.mt55 {margin-top: 55px;}
.mt60 {margin-top: 60px;}
.mt65 {margin-top: 65px;}
.mt70 {margin-top: 70px;}
.mt75 {margin-top: 75px;}
.mt80 {margin-top: 80px;}
.mt85 {margin-top: 85px;}
.mt90 {margin-top: 90px;}
.mt95 {margin-top: 95px;}
.mt100 {margin-top: 100px;}

.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb55 { margin-bottom: 55px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb65 { margin-bottom: 65px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb75 { margin-bottom: 75px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb85 { margin-bottom: 85px !important; }
.mb90 { margin-bottom: 90px !important; }
.mb95 { margin-bottom: 95px !important; }
.mb100 { margin-bottom: 100px !important; }


.pt5 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt15 {padding-top: 15px;}
.pt20 {padding-top: 20px;}
.pt25 {padding-top: 25px;}
.pt30 {padding-top: 30px;}
.pt35 {padding-top: 35px;}
.pt40 {padding-top: 40px;}
.pt45 {padding-top: 45px;}
.pt50 {padding-top: 50px;}
.pt55 {padding-top: 55px;}
.pt60 {padding-top: 60px;}
.pt65 {padding-top: 65px;}
.pt70 {padding-top: 70px;}
.pt75 {padding-top: 75px;}
.pt80 {padding-top: 80px;}
.pt85 {padding-top: 85px;}
.pt90 {padding-top: 90px;}
.pt95 {padding-top: 95px;}
.pt100 {padding-top: 100px;}
.pt120 {padding-top: 120px;}
.pt130 {padding-top: 130px;}
.pt140 {padding-top: 140px;}
.pt150 {padding-top: 150px;}
.pt190 {padding-top: 190px;}

.pb5 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
.pb15 {padding-bottom: 15px;}
.pb20 {padding-bottom: 20px;}
.pb25 {padding-bottom: 25px;}
.pb30 {padding-bottom: 30px;}
.pb35 {padding-bottom: 35px;}
.pb40 {padding-bottom: 40px;}
.pb45 {padding-bottom: 45px;}
.pb50 {padding-bottom: 50px;}
.pb55 {padding-bottom: 55px;}
.pb60 {padding-bottom: 60px;}
.pb65 {padding-bottom: 65px;}
.pb70 {padding-bottom: 70px;}
.pb75 {padding-bottom: 75px;}
.pb80 {padding-bottom: 80px;}
.pb85 {padding-bottom: 85px;}
.pb90 {padding-bottom: 90px;}
.pb95 {padding-bottom: 95px;}
.pb100 {padding-bottom: 100px;}
.pb120 {padding-bottom: 120px;}
.pb150 {padding-bottom: 150px;}
.pb200 {padding-bottom: 200px;}
.pb250 {padding-bottom: 250px;}

.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }


/* .f-sora-l {font-family: 'sora-l' !important; font-weight: normal;}
.f-sora-r {font-family: 'sora-r' !important; font-weight: normal;}
.f-sora-b {font-family: 'sora-b' !important; font-weight: normal;} */

.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-justify {text-align: justify;} 
 

.f-inter-l {font-family: 'inter-l' !important; }
.f-inter-m {font-family: 'inter-m' !important; }
.f-inter-r {font-family: 'inter-r' !important; }
.f-inter-b {font-family: 'inter-b' !important; }

/* =============================  MENU  ============================= */


#search-wrapper {
    display: none;
    position: fixed;
    z-index: 102;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: center !important;
    background-size: cover !important;
} 

#search-wrapper .inner {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center; 
    margin: 0 auto; 
    
} 

#search-wrapper .inner .search { 
    display: flex;
    width: 100%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    border-radius: 6px;
}

#search-wrapper .inner .search-input-wrapper {
    width: 85%;
}

#search-wrapper .inner .search-input-wrapper input {
    width: 100%;
    height: 64px;
    border: none;
    color: var(--grey9) !important;
    background: var(--white);
    padding-left: 25px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    
}

#search-wrapper .inner .search-input-wrapper input::placeholder {
    color: var(--grey8) !important;
}

#search-wrapper .inner .search-btn-wrapper {
    width: 15%;
}



#search-wrapper .inner #search-btn {
    background: var(--light-blue);
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--white);
    text-decoration: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}


#search-wrapper .backdrop {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 103; 
}

#search-wrapper .container {
    position: relative;
    z-index: 104;
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 !important;
    z-index: 101;
    transition: .3s ease all;
}


#navbar .center li,
#navbar .center a {
    color: var(--white);
}

#navbar .top {
    display: flex;
    justify-content: space-between;
    padding: 23px 0;
}

/* #navbar .top .center {
    padding-top: 10px;
} */


#navbar .top .center ul {
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#navbar .top .center a {
    text-decoration: none;
    position: relative;
}

#navbar .top .center a:hover {
    color: var(--light-blue);
}

#navbar .top .center a.active {
    color: var(--light-blue);
} 

#navbar .top .center a.active::after {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 3px;
    z-index: 102;
    background: var(--light-blue);
    border-radius: 4px;
}

#navbar .top .center .link1 {
    gap: 37px;
    padding-left: 0; 
}

#navbar .top .center .link1 a {
    font-family: 'inter-b' !important;
    font-size: 18px;
    /* font-size: 16px; */
    letter-spacing: 1px;
}

#navbar .bottom .link2 {
    gap: 34px; 
    padding-left: 0;
}

#navbar .bottom .link2 a,
#navbar .bottom .link2 li {
    text-decoration: none;
    font-family: 'inter-l' !important;
    font-size: 12px;
}

#navbar .right {
    display: flex;
    padding-top: 12px;
    gap: 32px;
}

#navbar .right .lang-wrapper {
    display: flex;
    height: max-content; 
    align-items: center;
}


#navbar .right .lang-wrapper select {
    --webkit-appereance: none;
    background: none;
    color: var(--white);
    border: none;
    font-size: 16px;
    /* font-size: 14px; */
    font-family: 'inter-l' !important;
}


#navbar .right .search {
    margin-top: 2px;
}

#navbar .logo img {
    width: 115px; 
}



#navbar-mobile {
    background: var(--white);
    padding: 20px 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 101;
}

#navbar-mobile .inner {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
}

#navbar-mobile .right {
    display: flex;
    align-items: center;
    gap: 50px;
}

#navbar-mobile .icon-search {
    width: 32px;
}

#navbar-mobile .icon-menu {
    width: 34px;
}

.page-banner {
    margin-top: 87px;
}


#nav-mobile-open { 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    /* background: rgba(0, 0, 0, .6); */
    height: 100vh;
    left: 100%;
}

#nav-mobile-open .lang-select-mobile {
    display: none;
}


#nav-mobile-open ul {
    padding-left: 0;
    list-style-type: none;
    text-align: right;
}


#nav-mobile-open #menu-close {
    padding-top: 27px;
    display: flex;
    justify-content: end;
}


#nav-mobile-open .searchbar {
    position: relative;
    margin-top: 40px;
}

#nav-mobile-open .searchbar input {
    background: var(--white);
    width: 100%;
    border: none;
    color: var(--grey11);
    border-bottom: 1px solid var(--grey11);
    padding-left: 60px;
    padding-bottom: 7px; 
    font-size: 30px;
}   

#nav-mobile-open .searchbar input::placeholder {
    color: var(--pink2);
}

#nav-mobile-open li {
    margin-top: 60px;
}

#nav-mobile-open a {
    font-size: 40px;
    text-decoration: none;
    color: var(--dark-blue);
}

#search-btn-mobile {
    position: absolute;
    bottom: 7px;
    bottom: 17px;
}

.lang-wrapper-mobile {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px;
}


.lang-wrapper-mobile select {
    font-size: 40px;
    color: var(--dark-blue);
    border: none;
    appearance: none;
    --webkit-appearance: none;
    background: url(../../img/icon/arrow-angle-down-grey.svg) no-repeat;
    padding-right: 30px;
    background-position: right;
    background-size: 21px;
}


.lang-wrapper-mobile .lang-icon img {
    width: 36px;
}

/* ============================= MENU END ============================= */


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

footer,
footer p {
    color: var(--white) !important;
    background: var(--oxford-blue) !important;
}

footer hr {
    color: var(--grey) !important;
}

footer .bottom {
    font-size: 16px;
    font-family: 'inter-l';        
    padding-top: 21px;
    padding-bottom: 43px;
}

footer .top {
    padding-top: 60px;
    display: flex;
    justify-content: space-between;
}

footer a,
footer h6 {
    text-decoration: none;
    color: var(--white);
    font-family: 'inter-b';
    font-size: 16px;
    letter-spacing: .5px;
}


footer a {
    font-family: 'inter-b' !important; 
}

footer .logo img {
    width: 196px;
}

footer .mid {
    display: flex;
    margin-top: 116px;
    margin-bottom: 20px;
    justify-content: space-between;
}

footer .mid .left {
    display: flex;
    gap: 100px;
    width: 50%;
}

footer .mid .partner {
    display: flex;
    gap: 30px;
}


footer h6 {
    margin-top: 24px;
    margin-bottom: 24px;
}


footer a:hover {
    color: var(--yellow);
}


footer a:hover img {
    opacity: .5; 
}


.footer-info {
    list-style: none;
    padding-left: 0;
}

.footer-info a {
    display: flex;
    gap: 16px;
    font-family: 'inter-r' !important;
}

.footer-info a .text {
    line-height: 20px;
}

.footer-info a .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    padding: 3px;
    border-radius: 15px;
    background-color: var(--light-blue); 
}

.btn-rounded {
    display: flex;
    width: max-content;
    font-size: 16px;
    padding: 8px 20px;
    border-radius: 20px;
}

.btn-rounded.light-blue {
    background: var(--light-blue);
    border: 1px solid var(--light-blue);
}

.btn-rounded.light-blue:hover {
    background: var(--white);
    color: var(--light-blue);
}

footer .cta .btn-rounded {
    margin-bottom: 25px;
}
/* ============================= FOOTER END ============================= */



.title-h1 {
    font-size: 48px;
    line-height: 58px;
}

.title-h2 {
    font-size: 48px;
    line-height: 56px; 
    /* font-size: 40px;
    line-height: 48px; */
}

.title-h3 {
    font-size: 42px;
    /* font-size: 38px; */
}

.title-h4 {
    /* font-size: 24px; */
    font-size: 28px;
}
 


.content-quote2 p,
.content-quote2 strong,
.content-quote li,
.content-quote strong,
#contentw-2 #intro-2 li,
#contentw-2 #intro-2 strong,
#contentw-2 #intro-1 p,
#contentw-2 #intro-1 strong 
{
   font-size: 28px;
   line-height: 34px;
}

.description-fsize {
    font-size: 18px;
    line-height: 30px;
}

.description-fsize-m  {
    font-size: 24px;
    line-height: 34px;
}

.description-fsize-l {
    font-size: 36px;
    line-height: 46px;
}

        
.title-f16 {
    font-size: 16px; 
}

.title-f24 {
    font-size: 24px; 
}

.title-f28 {
    font-size: 28px; 
}

.title-f36 {
    font-size: 36px; 
}

.title-f40 {
    font-size: 40px; 
    line-height: 48px;
}

.title-f48 {
    font-size: 48px; 
}

.title-f45 {
    font-size: 45px; 
    line-height: 54px;
}

.title-f48 {
    font-size: 48px; 
}

.desc-f16 {
    font-size: 16px;
    line-height: 25px;
}

.desc-f18 {
    font-size: 18px;
    line-height: 29px;
}

.desc-f22 {
    font-size: 22px;
    line-height: 34px;
}

.desc-f24 {
    font-size: 24px;
    line-height: 38px;
}

.desc-f28 {
    font-size: 28px;
    line-height: 34px;
}

.desc-f30 {
    font-size: 30px;
    line-height: 42px;
}

.btn {      
    display: block;
    /* width: 190px;
    height: 35px; */
    width: 220px;
    height: 40px;
    text-decoration: none;
    /* font-size: 15px; */
    font-size: 17px;
    padding: 6px 0px 6px 23px;
    border-radius: 50px;
}

.btn.center {
    justify-content: center;
    text-align: center;
    padding: 6px 0px 6px 0px;
}

.btn.arrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 23px 6px 23px;
}

.btn.btn-blue {
    color: var(--white);
    background: var(--dark-blue);
}

.btn.btn-blue:hover {
    background: var(--light-blue) !important;
}

.btn.btn-light-blue {
    color: var(--dark-blue);
    background: var(--light-blue);
}

.btn.btn-light-blue:hover {
   opacity: .8;
}


.home-pattern {
    position: absolute;
}

/* ============================= HOME ============================= */

.treatment .logo img {
    width: 653px;
    max-width: 90%;
    margin: 120px auto 70px;
}

.treatment .logo h2 {
    font-size: 40px;
    font-family: 'inter-l' !important;
}

.treatment .logo h2 b {
    font-family: 'inter-sb' !important;
}

.treatment .content {
    background: var(--dark-blue);
    border-bottom: 31px solid var(--light-blue);
    border-radius: 13px;
    padding: 40px;   
    margin-bottom: 100px;
}

.treatment .content p {
    width: 70%;
    margin: 0 auto;
    color: var(--white);
}

#slider-home .slider-bg {
    background-position: center !important;
    background-size: cover !important;
    width: 100%;
    /* height: 979px; */
    height: 100vh;
}

#slider-home .container {
    height: 100%;
    display: grid;
    align-items: end;
}

#slider-home .slider-inner {
    margin-bottom: 260px;
}

#slider-home .subtitle {
    margin-top: 14px;
}

#slider-home .subtitle p { 
    color: var(--white);
}

#banner {
    color: var(--white) !important;
    position: relative;
}

#banner .slider-counter {
    position: absolute;
    left: 0;
    right: 0;
    top: 340px;
    font-size: 16px;
    z-index: 10;
}

#banner .slider-counter .container {
    display: flex;
    align-items: center;
    gap: 17px;
}

#banner .slider-counter {
    font-size: 16px;
}

#banner .slider-counter .current {
    border: 1px solid;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#banner .social-media {
    position: absolute;
    top: 400px;
    right: 0;
    left: 0;
    text-align: right;
    z-index: 10;
}

#banner .social-media a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--white);
    margin-left: auto;
    margin-bottom: 30px;
    margin-bottom: 22px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


#home-intro-1 {
    border-radius: 13px; 
    padding: 45px 53px 120px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

#home-intro-1 .left { 
    margin-top: 187px;
    float: left;
    width: 70%;
    position: relative;
}

#home-intro-1 .right {
    float: right;
    width: 30%;
    display: flex;
    justify-content: end;
}

#home-intro-1 .quote-mark {
    position: absolute;
}

#home-intro-1 .content {
    padding-left: 195px;
}

#home-intro-1 .content .text {
    /* font-size: 32px; */
    font-size: 40px;
    /* width: 69%; */
    width: 88%;
    line-height: 45px;
}


#home-intro-1 .content .text p {
    color: var(--dark-blue) !important;
}

#home-intro-1 .right img {
    /* width: 338px; */
    width: 90%;
}


#home-intro-1 .left .name,
#home-intro-1 .left .position {
    color: var(--grey3);
}

#home-intro-2 img {
    margin: 0 auto;
}

.box-wrapper {
    width: 60%;
    margin: 0 auto;
}

.box-list1 { 
    gap: 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}


.box-list1 .item { 
    background: var(--dark-blue);
    height: 244px;
    padding: 20px;
    border-radius: 13px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    color: var(--light-blue) !important;
}

.box-list1 .item p {
    color: var(--light-blue) !important;
}

.box-list1 .item h3 {  
    margin: 40px 0 10px;
    font-size: 24px;
}

.our-strength {
    width: 54%;
    margin: 0 auto;
}

.our-strength h2 {
    color: var(--dark-blue);
}

#home-intro-3 {
    border-radius: 13px;
    padding: 50px 40px;
}

.card-list1 .item {
    background: var(--dark-blue);
    color: var(--white) !important;
    padding: 20px;
    border-radius: 13px;
    height: 620px;
}

.card-list1 .item p { 
    color: var(--white) !important;  
    text-align: justify;
}

.card-list1 {
    display: grid; 
    gap: 25px;
    grid-template-columns: repeat(4, 1fr);
}

.card-list1 .item .title {     
    margin: 40px 0 15px;
}


.card-list1 .item .title h3 {    
    font-family: 'inter-r' !important;
}

#home-intro-4,
#home-intro-7 {
    display: flex;
    gap: 45px;
}

#home-intro-4 .left,
#home-intro-7 .left {
    width: 40%;
}

#home-intro-4 .left img,
#home-intro-7 .left img {
    width: 100%;
}

#home-intro-4 .right{
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    border-bottom: 1px solid var(--grey5);
}


#home-intro-4 .right > div {
    width: 100%;
}

#home-intro-4 .section-desc {
    width: 90%;
}


#home-intro-4 .right .section-cta{
    display: flex;
    justify-content: end;
    align-items: end;
    margin-bottom: 20px;
}

#bg-intro-5 {
    height: 956px;
    background-size: cover !important;
    display: flex;
    align-items: end;
    justify-content: end;
}

#home-intro-5 {
    width: 50%;
    margin-left: auto;
    margin-bottom: 50px;
}

#home-intro-5 .section-desc {
    margin-bottom: 120px;
    margin-top: 20px;
}

#home-intro-5 p {
    color: var(--white);
}

#home-intro-6 {    
    padding: 90px 0 150px;
    border-top: 1px solid var(--grey3);
}

#home-intro-6 .section-desc {
    width: 59%;
    margin: 15px auto 60px;
    text-align: center;
}

#home-intro-6 .section-cta {
    display: flex;
    justify-content: center;
}

#home-intro-7 .section-desc {
    width: 80%;
}

#home-intro-7 .section-cta {    
    display: flex;
    align-items: end; 
    width: 100%;
}

#home-intro-7 .right {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
}

#home-section-7 {
    position: relative;
}

#home-section-7::before {
    content: '';
    background-color: var(--yellow);
    position: absolute;
    width: 100%;
    height: 328px;
    z-index: -1;
}

#home-intro-2 img {
    width: 300px;
}


.card-list1 .item:hover {
    background: var(--oxford-blue);
    transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    transform: scale(1.1);
}

.box-list1 .item:hover {
    background: var(--oxford-blue);
    transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    transform: scale(1.1);
}

.card-list1 .item:hover h3 {
    color: var(--light-blue) !important;
}

.card-list1 .item:hover p {
    color: var(--light-blue) !important;
}


#slider-home .slider-arrow {
    position: absolute;
    z-index: 50;
    width: 50px;
    cursor: pointer;
}

#slider-home .slider-arrow.arrow-l {
    right: 145px;
    bottom: 40px;
}


#slider-home .slider-arrow.arrow-r {
    right: 82px;
    bottom: 40px;
}


#slider-home .slider-arrow.hover {
    display: none;
}

#slider-home .arrow-wrapper:hover .hover {
    display: block;
}

#slider-home .arrow-wrapper:hover .normal {
    display: none;
}


#slider-home .slick-dots li {
    width: 12px; 
}

#slider-home .slick-dots li.slick-active {
    width: 25px; 
}

#slider-home .slick-dots li button:before{
    opacity: 1 !important;
    color: var(--white);
    background: var(--white);
    width: 9px;
    height: 6px;
    content: '';
    border-radius: 5px;
    margin: 0 auto;
    text-align: center;
    right: 0;
}

#slider-home .slick-dots li.slick-active button:before{ 
    color: var(--light-blue);
    background: var(--light-blue); 
    width: 25px;
}

#slider-home .slick-dots li {
    margin: 0 2px;
}


#slider-home .slick-dots {
    bottom: 40px;
}

 

/* ============================= HOME END ============================= */

/* ============================= WHO WE ARE ============================= */

.page-banner {
    height: 544px;
    width: 100%;
    background-position: center !important;
    background-size: cover !important;
    margin-top: 120px;
    display: flex;
    align-items: end;
    padding-bottom: 54px;
}


#navbar.navbar-white #menu-bottom {
    padding: 6px 0;
}


#navbar #menu-bottom .link2 {
    display: flex;
    justify-content: center;
    list-style: none;
}

#subnav ul {
    list-style-type: none;
    display: flex;
    padding-left: 0;
    gap: 50px;
    padding: 30px 0 5px;
}


#subnav .container {
    border-bottom: 1px solid var(--grey6);
}

#subnav ul li a {
    color: var(--grey6);
    text-decoration: none;
    /* font-size: 16px; */
    font-size: 18px;
    position: relative;
    padding-right: 5px;
}

#subnav ul li a:hover {
    color: var(--light-blue);
}

#subnav ul li a.active {
    color: var(--light-blue);
}

#subnav ul li a.active::after {
    content: '';
    display: block;
    position: absolute;
    background: var(--light-blue);
    width: 100%;
    height: 4px;
    bottom: -9px;
    border-radius: 2px;
}


#content-1 .all {
    display: flex;
}

#content-1 .all .left {
    width: 50%;
}

#content-1 .all .right {
    width: 50%;
}

#content-1 .all .right .section-main-content {
    display: flex;
    gap: 5%;
}

#content-1 .all .right .section-main-content div {
    width: 48%;
}

#content-1 .all .title {
    width: 57%;
}


#content-1 #intro-1 .right {
    display: flex;
    flex-wrap: wrap;
}


#content-1 #intro-1 .right .section-cta {
    display: flex;
    justify-content: end;
    align-items: end;
    width: 100%;
}
#content-1 #intro-2  {
    background-size: cover !important;
    background-position: center !important; 
    height: 956px;
    margin-top: 80px;
}

#content-1 #intro-2 .container {
    height: 100%; 
    display: flex;
    align-items: end;
    justify-content: end;
    padding: 20px 0 140px;
}

#content-1 #intro-2 .inner {
    width: 40%;
}

#content-1 #intro-3 .top {
    display: flex;
}

#content-1 #intro-3 .left {
    width: 40%;
}

#content-1 #intro-3 .right {
    width: 60%;
    border-bottom: 1px solid var(--grey3);
    padding-bottom: 35px;
}

#content-1 #intro-3 .section-cta {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-top: 80px;
}

#content-1 #intro-4 .bottom {
    display: flex;
}

#content-1 #intro-4 .left {
    width: 40%;
}

#content-1 #intro-4 .right {
    width: 60%;
}

#content-1 #intro-4 .bottom .section-desc .description-fsize {
    border-bottom: 1px solid var(--grey3);
}

#content-1 #intro-4 .bottom {
    margin-top: 60px;
}

#content-1 #intro-4 .bottom .left {
    display: flex;
    flex-wrap: wrap;
}

#content-1 #intro-4 .bottom .left > div {
    width: 100%;
}

#content-1 #intro-4 .bottom .left .section-cta {
    display: flex;
    align-items: end;
}

#content-1 #intro-4 {
    margin-bottom: 120px;
}

.icon-text-list {
    display: flex;
    gap: 120px;
    margin-top: 40px;
    padding-left: 15px;
    text-align: center;
}

.icon-text-list .item .head {
    color: var(--white);
    display: flex;
}

.icon-text-list .item .head .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--dark-blue);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.icon-text-list .item .head .text {
    width: 137px;
    height: 42px;
    background: var(--dark-blue);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    margin-top: 5px;
    margin-left: -26px;
    z-index: -1;
}


.icon-text-list .item .foot {
    margin-top: 25px;
}
/* ============================= WHO WE ARE ============================= */


/* ============================= WHO WE ARE : HISTORY ============================= */

#content-2 #intro-1 {
    position: relative;
    padding-top: 100px;
    margin-top: 20px;
}

#content-2 #intro-1::before {
    content: '';
    display: block;
    width: 100%;
    height: 358px;
    background: var(--yellow);
    position: absolute;
    z-index: -1;
    top: 0;
}

#content-2 .section-desc {
    width: 60%;
    margin: 80px auto 120px;
}


#content-3 #intro-2 .image img {
    margin-bottom: 30px;
    width: 280px;
}

/* ============================= WHO WE ARE : HISTORY END ============================= */

/* ============================= WHO WE ARE : PROFILE ============================= */

#content-2 #intro-1 {
    position: relative;
    padding-top: 100px;
    margin-top: 20px;
}

#content-2 #intro-1::before {
    content: '';
    display: block;
    width: 100%;
    height: 358px;
    background: var(--yellow);
    position: absolute;
    z-index: -1;
    top: 0;
}

#content-2 .section-desc {
    width: 60%;
    margin: 80px auto 120px;
}

#content-3 #intro-1 .history-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 60px;
}

#content-3 #intro-1 .history-list .item {
    display: flex;
}

#content-3 #intro-1 .history-list .item > div:nth-child(2) {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid var(--grey7);
    padding-bottom: 120px;
}


.box-container {
    margin-top: 30px;
    height: 563px;
    border-radius: 13px;
    display: flex;
    background: var(--white);
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.people-wrapper {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    /* gap: 3%; */
}


.people-wrapper .item {
    width: 100%;
    text-align: center;
}

.people-wrapper .item img {
    margin: 0 auto;
}

#content-3 #intro-4 {
    position: relative;
}

#content-3 #intro-4::before {
    position: absolute;
    content: '';
    background: var(--pink);
    width: 100%;
    height: 335px;
    top: 0;
}


#content-3 #intro-4 .left, 
#content-3 #intro-4 .right 
{
    position: relative;
}


#content-3 #intro-4 .section-content {
    padding-top: 80px;
}

#content-3 .bottom > div {
    width: 90%;
    margin: 0 auto;
}
/* ============================= WHO WE ARE : PROFILE END ============================= */

/* ============================= WHO WE ARE : PARTNER ============================= */

#content-4 #intro-1 {
    padding-top: 120px;
}

#content-4 #intro-1::before {
    position: absolute;
    content: '';
    background: var(--yellow);
    width: 100%;
    height: 267px;
    top: 0;
    z-index: -1;
}

.si-white.section-short-info {
    border-radius: 13px;
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
}

.si-white .icon-text-list .item .head {
    justify-content: center;
}

.si-white .icon-text-list .item .head .icon {
    z-index: 2;
}

.si-white .icon-text-list .item .head .text {
    z-index: 1;
}

.si-white .icon-text-list .item .head .icon, 
.si-white .icon-text-list .item .head .text
{
    background: var(--white);
    position: relative;
    color: var(--dark-blue);
}

#content-4 .section-detail {
    background: var(--white);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 13px;
    padding: 45px 75px;
}

#content-4 #intro-2::before {
    position: absolute;
    content: '';
    background: var(--light-blue);
    width: 100%;
    height: 313px;
    top: 0;
    z-index: -1;
}


.counter-custom {
    background: var(--dark-blue);
    border-radius: 13px; 
    color: var(--white);
    margin: 60px 0 0;
    /* display: grid;
    grid-template-columns: repeat(3, 1fr); */
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 80px 0 60px;
}

.counter-custom .counter {
    font-family: 'inter-b';
    font-size: 68px;
    line-height: 62px;
}

.counter-custom .name {
    font-family: 'inter-m';
}

#content-4 #intro-2 .section-content {
    margin: 0 auto;
}

#content-4 #intro-3::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 496px;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: url(/img/who_we_are/bg-blue-gradient.png) no-repeat center center;
    background-size: cover;
}

#content-4 #intro-3 .si-white .icon-text-list {
    margin-top: 60px;
}

#content-4 h2.description-fsize {
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grey2);
}

#content-4 #intro-3 .section-desc,
#content-4 #intro-5 .section-desc {
    display: flex;
    gap: 25px;
}

#content-4 #intro-4 .content-img {
    width: 65%;
    margin: 0 auto;
    padding-top: 60px;
}

#content-4 #intro-4 .top {
    /* background: var(--dark-blue); */
    background: #28354E;
}

#content-4 #intro-4 .img-floating {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
}

#content-4 #intro-4 .img-floating .container {
    display: flex;
    justify-content: end;
}

#content-4 #intro-4 .img-floating .container img {
    width: 222px;
}

.si-content {
    display: flex;
    justify-content: center;
}

.our-partner-hsi {
    display: flex;
    justify-content: end;
    margin-top: 30px;
}

#content-4 #intro-5 .si-white {
    background: rgb(35,61,100);
    background: linear-gradient(180deg, rgba(35,61,100,1) 29%, rgba(29,37,54,1) 98%);
}

#content-4 #intro-5 {
    padding-top: 182px;
    margin-top: -150px;
}

#content-4 #intro-5::before {
    position: absolute;
    content: '';
    background: var(--grey2);
    width: 100%;
    height: 767px;
    top: 0;
    z-index: -1;
}


.logo-our-partner {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px 0;
    margin: 40px 0 0px;
}

.logo-our-partner img {
    width: 109px;
}
/* ============================= WHO WE ARE : PARTNER END ============================= */

/* ============================= WHAT WE DO ============================= */

#contentw-1 #intro-1 {
    width: 100%;
    background-size: cover !important;
    background-position: center !important;
    height: 753px;
    display: flex;
    justify-content: center; 
    padding-top: 100px;
} 

#contentw-1 #intro-1 .main-image img { 
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#contentw-1 #intro-1 img {
    margin: 0 auto 40px; 
}

#contentw-1 #intro-1 h2 {
    font-family: 'inter-r' !important;
}

#contentw-1 #intro-1 h2 {
    width: 48%;
    margin: 0 auto;
}

#contentw-1 #intro-2 {
   background-position: center !important;
   background-size: cover !important;
   border-radius: 13px;
   padding: 103px 0;
}

#contentw-1 #intro-2 .section-content {
    background: var(--white);
    gap: 40px;
    align-items: center;    
    padding: 60px 70px;
    border-radius: 13px;
}

.title-f64 { 
    line-height: 65px;
    font-size: 64px;
}

#contentw-1 #intro-3 .section-content {
    gap: 45px;
}

#contentw-1 #intro-7 .left,
#contentw-1 #intro-6 .left,
#contentw-1 #intro-4 .left,
#contentw-1 #intro-3 .right {
    display: flex;
    flex-wrap: wrap;
}

#contentw-1 #intro-7 .section-cta,
#contentw-1 #intro-6 .section-cta,
#contentw-1 #intro-4 .section-cta,
#contentw-1 #intro-3 .section-cta {
    display: flex;
    align-items: end;
    width: 100%;
}

#contentw-1 #intro-4 .section-main-content {
    width: 75%;
    margin: 0 auto;
}

#contentw-1 #intro-4 {
    background: var(--grey2);
}

#contentw-1 #intro-5 .sm-list {
    display: flex;
    width: 50%;
    margin: 0 auto;
    justify-content: space-between;
}

#contentw-1 #intro-5 .sm-list .item { 
    width: 45%;
}

#contentw-1 #intro-5 .sm-list .item img { 
    margin: 0 auto 20px;
}

#contentw-1 #intro-5 {
    margin: 60px 0 140px;
}

#contentw-1 #intro-5 .section-content {
    border-top: 1px solid var(--grey8);
}

#contentw-1 #intro-6 .container {
    background: var(--yellow);
    border-radius: 13px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#contentw-1 #intro-6 .section-content {
    gap: 80px;
    padding: 60px;
} 

#contentw-1 #intro-6 .line {
    border-bottom: 1px solid var(--grey8);
}

#contentw-1 #intro-7 #slider-publication .inner {
    width: 90%;
    background: var(--light-blue);
    border-radius: 13px;
    padding: 30px; 
} 

#contentw-1 #intro-7 #slider-publication .image {
    background: white;
    padding: 20px 30px;
    margin-top: 30px;
    border-radius: 13px;
} 

#contentw-1 #intro-7 #slider-publication .image img { 
    width: 100%;
}

.container-right-custom {
    width: 95%;
    margin-left: auto;
    /* max-width: 1920px; */
} 

#slider-publication .title {
    height: 80px;
}

#contentw-1 #intro-5 {
    position: relative;
}


#contentw-1 #intro-4 .section-content { 
    gap: 50px;
}


#slider-publication .slider-arrow.arrow-l {
    left: 18px;
}

#slider-publication .slider-arrow.arrow-r {
    right: 80px;
}

#slider-publication .slider-arrow.hover {
    display: none;
}

#slider-publication .arrow-wrapper:hover .hover {
    display: block;
}

#slider-publication .arrow-wrapper:hover .normal {
    display: none;
}

#slider-publication .slider-arrow:hover {
    background: var(--grey4);
}


#slider-publication .slick-dots li {
    width: 12px; 
}

#slider-publication .slick-dots li.slick-active {
    width: 25px; 
}

#slider-publication .slick-dots li button:before{
    opacity: 1 !important;
    color: var(--grey6);
    background: var(--grey6);
    width: 9px;
    height: 6px;
    content: '';
    border-radius: 5px;
    margin: 0 auto;
    text-align: center;
    right: 0;
}

#slider-publication .slick-dots li.slick-active button:before{ 
    color: var(--grey12);
    background: var(--grey12); 
    width: 25px;
}

#slider-publication .slick-dots li {
    margin: 0 2px;
}


#slider-publication .slick-dots {
    bottom: -70px;
}

#slider-publication .slick-dotted.slick-slider {
    margin-bottom: 0;
}

/* ============================= WHAT WE DO END ============================= */

/* ============================= WHAT WE DO : RND ============================= */


.title-large {
    font-size: 72px;
    line-height: 72px;
    letter-spacing: 1px;
 }
.title-medium {
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 1px;
 }
 
 .quote1 {
    width: 80%; 
    margin: 0 auto;
 }

 .quote1 .inner {
    width: 50%;
    margin: 80px auto;
 }

 .quote1 .text {
    position: relative;
 }

 .quote1 .image {
    /* position: absolute;
    left: -205px; */
 }

 .quote1 .main-image img {
    width: 150px;
    border: 3px solid var(--white); 
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }

 .quote1 .bottom {
    align-items: center;
    gap: 50px;
    margin-top: 40px;
 }

 #contentw-2 #intro-1 {
    position: relative;
 }

 .quote1::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 0;
    width: 85%;
    height: 436px;
    border-top: 3px solid var(--dark-blue);    
    border-right: 3px solid var(--dark-blue);
    border-top-right-radius: 100px;
 }

 .quote1::after {
    content: '';
    position: absolute;
    bottom: -70px;
    right: 0;
    width: 86%;
    height: 436px;
    border-bottom: 3px solid var(--dark-blue);    
    border-left: 3px solid var(--dark-blue);
    border-bottom-left-radius: 100px;
 }

 .quote2 {
    border: 1px solid var(--grey5); 
    background: var(--white);
    border-radius: 13px;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    width: 80%;
    margin: 0 auto;
    position: relative;
    padding: 60px 0 80px;
 }
 
 .quote2 {
    margin-top: 240px;
    position: relative;
 }

 .quote2 .left {
    position: relative;
 }
 
 .quote2 .left img {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-self: center;
    margin-top: -153px;
    border: 3px solid var(--white); 
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }

 
 .quote2 .left .wrapper-img {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-self: center;
    margin-top: -153px;
 }


.quote2 .left .wrapper-img {
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }

.quote2 .left .bg-img-quote {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background-size: cover !important;
    background-position: center !important; 
 }

 .quote2 .quote-close {
    position: absolute;
    right: 50px;
    bottom: -83px;
 }

 .quote2 .title {
    width: 71%;
    font-size: 26px;
    line-height: 38px;
 }
 
 .quote2 ul {
    list-style-type: disc;
    padding-left: 20px;
 }
 
 #contentw-2 #intro-3 {
    margin-top: 140px;    
    padding: 80px 0;
    background-size: cover !important; 
    background-position: right !important;
 }
 
 #contentw-2 #intro-3 .section-content {
    gap: 80px;
 }
/* ============================= WHAT WE DO : RND END ============================= */


/* ============================= WHAT WE DO : TEACHER TRAINING ============================= */

#contentw-3 #intro-2 {
    margin-top: 150px;
 }

 #contentw-3 #intro-3  {
    margin: 120px 0 100px;
 }
 
 #contentw-3 #intro-2 .section-content {
    gap: 80px;
 }
 
 #contentw-3 #intro-3 .bottom {
     margin-top: 40px;
     margin-bottom: 120px;
 }



/* ============================= WHAT WE DO : TEACHER TRAINING END ============================= */

/* ============================= WHAT WE DO : SCHOOL MANAGEMENT ============================= */

#contentw-3 #intro-2 {
    margin-top: 150px;
 }

 #contentw-3 #intro-3  {
    margin: 120px 0 100px;
 }
 
 #contentw-3 #intro-2 .section-content {
    gap: 80px;
 }
 
 #contentw-3 #intro-3 .container .section-content {
    border-radius: 13px;
    background: var(--yellow);
    padding: 40px;
 }

 #contentw-3 #intro-3 .bottom {
    margin-top: 40px;
    margin-bottom: 0px;
 }

 #contentw-3 #intro-2 .sm-detail {
    width: 55%;
    margin: 80px auto 0;
    gap: 30px;
 }

 #contentw-3 #intro-2 .sm-detail .item {
    background: var(--grey2);
    border-top: 27px solid var(--pink);
    border-radius: 13px;
    width: 50%;
    padding: 20px 50px 80px;
 }  

 #contentw-3 #intro-2 .sm-detail .item  img {
    margin: 0 auto 40px;
 }

 #contentw-3 #intro-3 #book-cover {
    display: flex;
    gap: 40px;
 }

 
 #contentw-3 #intro-3 .mid {
    margin-top: 40px;
 }

 
 #contentw-3.school #intro-3 .bottom {
    margin-top: 30px;
 }



/* ============================= WHAT WE DO : SCHOOL MANAGEMENT END ============================= */

/* ============================= WHAT WE DO : PUBLICATION ============================= */

.pub-list .pub-box {
    padding: 30px;
    border-radius: 13px;
    margin: 0 auto;
    /* max-width: 306px; */
    width: 346px;
    max-width: 100%;
}


.pub-list .pub-box .image {
    background: white;
    padding: 20px 30px;
    margin-top: 30px;
    border-radius: 13px;
}

.pub-list .pub-box.light-blue {
    background: var(--light-blue);
}

.pub-list .pub-box.dark-blue {
    background: var(--dark-blue);
}

.pub-list .pub-box:hover {
    background: var(--dark-blue) !important;
    transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
}

.pub-list .line {
    width: 72%;
    margin: 80px auto 100px;
    border-bottom: 1px solid var(--grey3);
}

.pub-list .desc {
    width: 60%;
    margin: 70px auto 40px;
    text-align: center;
}

.pub-list.bottom .desc {
    width: 64%;
}

#contentw-4 #intro-1::before {
    content: '';
    background-color: var(--dark-blue);
    position: absolute;
    width: 100%;
    height: 450px;
    z-index: -1;
}

.quote1 .inner {
    width: 70%;
    display: flex;
}

.quote1 .inner .left {
    width: 20%;
}

.quote1 .inner .right {
    width: 80%;
}


.quote3 {
    border: 1px solid var(--grey5); 
    background: var(--white);
    border-radius: 13px;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    width: 80%;
    margin: 0 auto;
    position: relative;
    padding: 60px 0 80px;
}

.quote3 {
    margin-top: 240px;
    position: relative;
}

.quote3 .top {
    position: absolute;
    top: -92px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

.quote3 .top img { 
    border: 2px solid var(--white); 
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 180px;
}

.quote3 .quote-close {
    position: absolute;
    right: 50px;
    bottom: -83px;
}

.quote3 .title {
    width: 90%;
    margin: 40px auto 20px;
    text-align: center;
}

.quote3 .title h2 {
    font-size: 26px; 
    line-height: 38px;
}

.quote3 ul {
    list-style-type: none;
    padding-left: 0;
}

/* ============================= WHAT WE DO : PUBLICATION END ============================= */

/* ============================= ANNUAL EVENT : CONFERENCE ============================= */

.quote4 img {
    width: 177px;
    margin: 0 auto;
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

 }

 .quote4 {
    padding-bottom: 50px;
    border-bottom: 1px solid var(--grey3);
 }

 .quote4 .text {
    width: 47%; 
    margin: 30px auto 60px;
    line-height: 55px;
 }


.speaker-list {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background: var(--white);
    border-radius: 13px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    padding: 60px 40px;
    row-gap: 60px;
 }

 
.speaker-list img {
    margin: 0 auto;
 }

.speaker-list .name {
    margin-top: 20px;
 }

.speaker-list .position {
    margin-top: 10px;
 }

 #content-annual-2 #intro-3 .right {
    padding-bottom: 60px;
    margin-bottom: 100px;
    border-bottom: 1px solid var(--grey3);
 }


/* ============================= ANNUAL EVENT : CONFERENCE END ============================= */

/* ============================= ANNUAL EVENT : PARENT CONFERENCE ============================= */
#content-annual-3 #intro-3 {
    padding-bottom: 120px;
}
/* ============================= ANNUAL EVENT : PARENT CONFERENCE END ============================= */

.footer-intro-4-sn{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.footer-intro-4-sn .left{
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.footer-intro-4-sn .right{
    display: flex;
    flex-direction: row;
    gap: 13px;
}

.footer-intro-4-sn .right .left-arrow, .right-arrow{
    width: 20px;
    height: 20px;
    display: flex;
    align-content: center;
    justify-content: center;
}

.footer-intro-4-sn .right .page-number{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.footer-intro-4-sn .right .page-number .number{
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
}

.actived{
    border-bottom: 1px solid var(--pink);
    color: var(--pink) !important;
}

.footer-intro-4-sn .right .page-number .number a{
    text-decoration: none;
    color: var(--grey8);
}



/* ============================= ANNUAL EVENT : NEWS ============================= */

#content-annual-4 #intro-1 .section-title {
    margin: 45px 0 60px;
}

#content-annual-4 #intro-1 h1 {
    font-size: 50px;
    line-height: 50px;
    font-family: 'inter-sb' !important;
}

#news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 70px;
    column-gap: 25px;
}

#news-list .item .bg-thumb {
    width: 100%;
    height: 300px;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 10px;
}

#news-list .item .body { 
    margin: 15px 0 0;
    height: 191px;
    width: 88%;
}

#news-list .item .foot {
    display: flex;
    gap: 114px;
}

#news-list .item .date,
#news-list .item .location {
    display: flex;
    gap: 15px;
}


#intro-1 .section-foot {
    display: flex;
    justify-content: space-between;
    margin: 150px 0 40px;
}

#intro-1 .section-foot .arrow-wrapper {
    display: flex; 
    gap: 20px;
}

#intro-1 .section-foot .arrow-wrapper .img-arr-hover {
    display: none;  
}

#intro-1 .section-foot .arrow-wrapper a:hover .img-arr {
    display: none;  
    transition: .3s ease all;
}

#intro-1 .section-foot .arrow-wrapper a:hover .img-arr-hover {
    display: block;  
    transition: .3s ease all;
}

.news-sm.social-media {
    position: absolute;
    right: 0;
    left: 0;
    top: 201px;
}

.news-sm.social-media a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--white);
    margin-left: auto;
    margin-bottom: 30px;
    margin-bottom: 22px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
/* ============================= ANNUAL EVENT : NEWS END ============================= */



/* -------------------- ANNUAL EVENT : NEWS DETAIL -------------------- */
#news-detail {
    width: 63%;
    padding-bottom: 80px;
    margin: 0 auto;
}

        
#news-detail ul {
    display: flex;
    gap: 11px;
    list-style-type: none;
    padding-left: 0px;
}

#news-detail ul a {
    text-decoration: none;
}

#news-detail ul a:hover {
    color: var(--dark-blue) !important;
}

#news-detail .breadcrumb {
    padding: 45px 0 60px;
}
    
.page-banner .social-media {
    position: absolute;
    right: 0;
    left: 0;
    top: 201px;
}
    
#news-detail .news-info {
    display: flex;
    gap: 114px;
    margin: 20px 0 50px;

}

#news-detail .news-info .date img {
    width: 26px;
}

#news-detail .news-info .location img {
    width: 18px;
}

#news-detail .news-info .date,
#news-detail .news-info .location {
    display: flex;
    gap: 15px;
}

  
#news-detail .mews-img img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 25px;
}

/* -------------------- ANNUAL EVENT : NEWS DETAIL END -------------------- */