@charset "utf-8";

/* ___________________ Header Starts _______________________*/

header .main-block{ display: flex; justify-content: space-between; align-items: center; padding-block: clamp(14px, 1.458vw, 28px);}
header .main-block .logo-wrapper{ display:inline-block; }
header .main-block .logo-wrapper h2{ font-family:var(--tertiary-font); font-size:34px; line-height:1; font-weight:700; color:#060606; }


header .main-block .btn-wrapper{ display: flex; justify-content: center; align-items: center; gap: clamp(15px, 1.563vw, 30px);}
header .main-block .btn-wrapper .btn-1{ font-size: var(--ugc-font-size-18); transition: all 0.2s ease-in-out;}
header .main-block .btn-wrapper .btn-1.solid{ background-color: var(--ash-color); border-radius: 8px; padding: clamp(10px, 0.729vw, 14px) clamp(18px, 1.875vw, 36px);}
header .main-block .logo-wrapper img{ max-width: clamp(120px, 9.375vw, 180px);}
header .main-block .btn-wrapper .btn-1:hover{ transform: translateY(-2px); transition: all 0.2s ease-in-out;}

.hero-section{ padding-block: clamp(30px, 5.208vw, 100px) 125px; position: relative; }
.hero-section .color-shadow{ position: absolute; bottom: -300px; right: 0; z-index: -1;}
.hero-section .content-block{ max-width: 760px; }
.hero-section .content-block h1{  font-size: var(--ugc-font-size-70); line-height: 1.2286; font-family: var(--secondary-font);}
.hero-section .content-block p{ line-height: 1.75; margin-top: clamp(30px, 3.125vw, 60px);}
.hero-section .img-block{ position:relative; width:clamp(200px, 20.052vw, 385px); z-index:1; }
.hero-section .img-block .img-wrapper{ border-radius:50%; overflow:hidden; aspect-ratio:1/1; border:4px solid var(--light-color); position:relative; z-index:5;}
.hero-section .img-block .img-wrapper img{ height:100%; width:100%; object-fit:cover; object-position:center;}
.hero-section .img-block .circle-net{ width:144.16%; aspect-ratio:1/1; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:4;}
.hero-section .img-block .circle-net img{ height:100%; width:100%; object-fit:cover;}
.hero-section .img-block::after{ content:''; width:120.52%; aspect-ratio:1/1; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.15) 100%); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:3; box-shadow:84px 149px 48px rgba(0, 0, 0, 0), 54px 95px 44px rgba(0, 0, 0, 0), 30px 54px 37px rgba(0, 0, 0, 0.02), 13px 24px 27px rgba(0, 0, 0, 0.03), 3px 6px 15px rgba(0, 0, 0, 0.03); opacity: 50%; border: 2px solid #fff;}
.hero-section .img-block::before{ content:''; width:136.62%; aspect-ratio:1/1; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.15) 100%); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2; box-shadow:84px 149px 48px rgba(0, 0, 0, 0), 54px 95px 44px rgba(0, 0, 0, 0), 30px 54px 37px rgba(0, 0, 0, 0.02), 13px 24px 27px rgba(0, 0, 0, 0.03), 3px 6px 15px rgba(0, 0, 0, 0.03); opacity: 50%;}


.hero-section.new-banner .mobile-banner{ display:none; }
header{ position:relative; z-index:2; }
.hero-section.new-banner{ margin-top:-110px; }
.hero-section.new-banner .desc{ position:absolute; width:100%; left:0; bottom:22%; }






.content-block-3 .note-1 h3 span{ display:block; }

.porfolio-section{ padding-bottom: clamp(50px, 7.552vw, 145px);}
.porfolio-section .box{ height: 100%; position: relative; border-radius: 10px; overflow: hidden;}
.porfolio-section .box .thumbnail{ height: 100%; width: 100%;}
.porfolio-section .box .content{padding: clamp(15px, 1.563vw, 30px); position: absolute; top: 0; left: 0; color: var(--light-color); display: flex; justify-content: space-between; gap: 20px; width: 100%;}
.porfolio-section .box .arrow-icon{  width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid #fff;}
.porfolio-section .box .arrow-icon svg{ fill: var(--light-color) !important;}
.porfolio-section .row{ --bs-gutter-y: clamp(24px, 3.125vw, 60px); --bs-gutter-x:clamp(24px, 1.979vw, 38px);}
.porfolio-section .box .content h3{ font-size: var(--ugc-font-size-35); font-family: var(--secondary-font); font-weight: 300; margin-bottom: clamp(11px, 0.781vw, 15px); line-height: 1; }
.porfolio-section .box .content p{ font-size: var(--ugc-font-size-18); font-weight: 500; line-height: 1;}
.porfolio-section [class^="col-"]:first-child .box .content h3{ font-size: var(--ugc-font-size-35); font-family: var(--secondary-font); font-weight: 300; margin-bottom: clamp(11px, 0.781vw, 15px); line-height: 1;}
.porfolio-section [class^="col-"]:first-child .box .content p{ font-size: var(--ugc-font-size-18); font-weight: 500; line-height: 1;}
.porfolio-section .box img{transition:all 0.3s ease-in-out;}
.porfolio-section .box img:hover{ transform: scale(1.2); transition:all 0.3s ease-in-out;}


.footer-1{ padding-block: clamp(40px, 5.990vw, 115px) clamp(40px, 7.813vw, 150px); background: var(--dark-color-1); }
.footer-1 .btn-wrapper{ display: flex; justify-content: center; gap: clamp(14px, 1.042vw, 20px);}
.footer-1 .btn-2{ color: #C3C2C2; border: 1px solid #515151; padding: clamp(14px, 1.042vw, 20px) clamp(20px, 2.083vw, 40px); border-radius: 9px; transition: all 0.3s ease-in-out;}
.footer-1 .btn-2:hover{ background-color: var(--light-color); color: var(--dark-color-1); transition: all 0.3s ease-in-out;}
.footer-1 p{ margin-top: clamp(33px, 3.854vw, 74px); text-align: center; color: #4F4F4F;}
.footer-2{ background-color: #121212; padding-block: clamp(54px, 7.031vw, 135px) clamp(45px, 5.208vw, 100px); color: var(--light-color);}
.footer-2 h6{ font-size: var(--ugc-font-size-24); letter-spacing: -1px; color: #363636; margin-bottom: clamp(30px, 3.125vw, 60px);}
.footer-2 p{ margin-top: clamp(50px, 9.896vw, 190px); text-align: center; font-size: var(--ugc-font-size-16); color: #4F4F4F;}
.footer-2 ul li h5{ font-family: var(--tertiary-font); font-size: var(--ugc-font-size-18); color: #828282; font-weight: 400;}
.footer-2 ul li a{transition: all 0.25s ease-in-out; font-size: var(--ugc-font-size-32); letter-spacing: -1px; color: #fff; display: flex; justify-content: space-between; align-items: center; padding-block: clamp(11px, 0.781vw, 15px) clamp(19px, 1.979vw, 38px); }
.footer-2 ul li + li{ margin-top: clamp(20px, 2.083vw, 40px);}
.footer-2 ul li{ border-bottom: 1px solid #4F4F4F;}
.footer-2 ul li a:hover{ opacity: 50%; transition: all 0.25s ease-in-out;}

.sub-title-1{ color: var(--blue-color); font-size: var(--ugc-font-size-18); font-weight: 500; font-family: var(--tertiary-font); margin-bottom: 15px;}
.title-1{ font-size: var(--ugc-font-size-93); font-family: var(--tertiary-font); font-weight: 600;}
.title-2{ font-size: var(--ugc-font-size-62); font-family: var(--secondary-font); font-weight: 400; letter-spacing: -2px;line-height: 1.2419;}
.title-3{ font-size: var(--ugc-font-size-35); font-family: var(--secondary-font); line-height: 1.4571; letter-spacing: -2px; font-weight: 400;}
.title-4{ font-size: var(--ugc-font-size-28); font-family: var(--secondary-font); letter-spacing: -1px; font-weight: 400; line-height:1.4; }
.title-5{ font-size: var(--ugc-font-size-30); font-family: var(--secondary-font); letter-spacing: -0.5px; font-weight: 300; line-height: 1.6333;}
.title-6{ font-size: var(--ugc-font-size-65); font-family: var(--secondary-font); font-weight: 400; letter-spacing: -2px;line-height: 1.2419;}
.title-7{ font-size: var(--ugc-font-size-40); font-family: var(--secondary-font); font-weight: 400; letter-spacing: -2px;}


.text-1{ font-size: var(--ugc-font-size-18); color: var(--dark-color-2); font-weight: 500; text-transform: uppercase;}
.text-3{ font-size: var(--ugc-font-size-16); color: var(--dark-color-2); font-weight: 400; line-height: 1.7;}
.text-2{ font-size: var(--ugc-font-size-28); font-family: var(--secondary-font); font-weight: 300; letter-spacing: -0.5px; line-height: 1.7;}
.text-4{ font-size: var(--ugc-font-size-15); line-height: 1.7333; color: #4F4F4F; line-height: 1.8; }


.note-1{ background-color: #FAFAFA; max-width: 900px; margin: 0 auto; padding: clamp(18px, 1.823vw, 35px) clamp(30px, 7.813vw, 150px);}
.note-1.v2{ padding: clamp(18px, 1.823vw, 35px) clamp(30px, 6.250vw, 120px);}
.note-1 .title-3{ position: relative;}
.note-1 .title-3::before{ position: absolute; content: ''; width: 4px; height: 100%; background: var(--blue-color); left: clamp(-22px, -1.302vw, -35px);}


.box-shadow-1{box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.border-radius-1{ border-radius: 15px;}


main .img-wrapper-1{ width: 100%;}
main .img-wrapper-2 .image{ margin-top: clamp(-11px, -0.781vw, -15px);}
main .img-wrapper-2 h3{ font-size: var(--ugc-font-size-25); font-weight: 700; color: #ADADAD;}
main .img-wrapper-2 h4{ font-size: var(--ugc-font-size-18); font-weight: 700; color: #4F4F4F;}
main{ padding-block: clamp(62px, 8.073vw, 155px);}


main .section-1 .content-block-1 .text-1{ margin-top: clamp(7px, 0.521vw, 10px);}
main .section-1 .content-block-1 .img-wrapper-1{ margin-top: clamp(30px, 3.125vw, 60px);}
main .section-1 .content-block-2{ padding-block: clamp(52px, 6.771vw, 130px) clamp(36px, 4.167vw, 80px);}
main .section-1 .content-block-2 .text-2{ margin-bottom: clamp(41px, 4.688vw, 90px);}
main .section-1 .content-block-2 .chips .text-3 + .text-3{ margin-top: clamp(15px, 1.563vw, 30px);}
main .section-1 .content-block-2 .chips + .chips{ margin-top: clamp(15px, 1.563vw, 30px);}
main .section-1 .content-block-3{ padding-block: clamp(54px, 6.250vw, 70px) clamp(34px, 3.906vw, 75px);}
main .section-1 .content-block-3 .text-3{ padding-block: clamp(29px, 3.385vw, 50px) clamp(23px, 2.344vw, 45px); line-height: 1.9375;}


main .section-2{ padding-block: clamp(56px, 7.292vw, 140px) clamp(60px, 7.813vw, 150px); background: var(--dark-color-3);}
main .section-2 .content-block-1 .title-2{ max-width: 1080px; margin: 0 auto; margin-bottom: clamp(70px, 9.115vw, 115px);}
main .section-2 .content-block-2 .box:nth-child(even) .row{ flex-direction: row-reverse;}
main .section-2 .content-block-2 .box .img-wrapper-1 + .img-wrapper-1{ margin-top: 18px;}
main .section-2 .content-block-2 .box + .box{ margin-top: clamp(67px, 8.750vw, 168px);}
main .section-2 .content-block-2 .box [class^="col-"] + [class^="col-"]{ padding-left: clamp(40px, 4.583vw, 88px);}
main .section-2 .content-block-2 .box:nth-child(even) [class^="col-"] + [class^="col-"]{ padding-left: 0; padding-right: clamp(40px, 4.583vw, 88px);}
main .section-2 .content-block-2 .box .title-4{ margin-bottom: clamp(25px, 2.604vw, 50px);}
main .section-2 .content-block-2 .box ul li + li{ margin-top: clamp(23px, 2.344vw, 45px);}
main .section-2 .content-block-2 .box ul li{ display: flex; gap: clamp(14px, 1.042vw, 20px);}
main .section-2 .content-block-2 .box ul li .text-3{ line-height: 1.5; width: calc(100% - clamp(-28px, -2.865vw, -55px));}
main .section-2 .content-block-2 .box ul li svg{ width: 35px;}


main .section-3{ padding-block: clamp(56px, 7.292vw, 140px) clamp(60px, 7.813vw, 130px);}
main .section-3 .content-block-1{ padding-bottom: clamp(25px, 2.604vw, 50px); margin-bottom: clamp(36px, 4.167vw, 80px); border-bottom: 1px solid #CCCCCC;}
main .section-3 .content-block-2 .text-3{ margin-block: clamp(30px, 2.083vw, 40px); padding-bottom: 20px; padding-top:10px; }
main .section-3 .content-block-2 .row{ --bs-gutter-y: 24px;}
main .section-3 .content-block-3{ padding-block: clamp(50px, 5.729vw, 110px) clamp(72px, 9.375vw, 180px);}
main .section-3 .content-block-3 .row{--bs-gutter-x:clamp(56px, 7.292vw, 140px); --bs-gutter-y:clamp(56px, 7.292vw, 100px);}
main .section-3 .content-block-3 .title-4{ margin-bottom: clamp(15px, 1.563vw, 30px);}


main .section-4 .content-block-1{ padding: clamp(36px, 4.167vw, 80px) clamp(20px, 2.083vw, 40px); background: var(--dark-color-3); border-radius: 21px;}
main .section-4 .content-block-1 > .title-4{ margin-bottom: clamp(30px, 3.125vw, 60px);}
main .section-4 .content-block-1 .box-container .box .author-img{ width: clamp(130px, 10.104vw, 194px); aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; margin: 0 auto; margin-block: clamp(14px, 1.406vw, 27px);}
main .section-4 .content-block-1 .box-container .box h3{ font-size: var(--ugc-font-size-35); font-weight: 700; color: #ACACAC; text-align: center;}
main .section-4 .content-block-1 .box-container .box{ text-align: center;}
main .section-4 .content-block-1 .box-container .box .text-3{ margin-block: clamp(14px, 1.042vw, 20px);}


main .section-5 .content-block-1{ padding-block: clamp(54px, 7.031vw, 135px) clamp(54px, 6.250vw, 90px);}
main .section-5 .content-block-1 .title-6{ max-width: 1200px;}
main .section-5 .content-block-1 .text-3{ margin-top: clamp(25px, 2.604vw, 50px);}
main .section-5 .content-block-1 .text-3:nth-child(1){ margin-top: clamp(32px, 3.646vw, 70px);}
main .section-5 .content-block-2 .label{ background: #EDF7FF; display: flex; gap: clamp(14px, 1.042vw, 20px); align-items: center; padding: clamp(23px, 2.344vw, 45px); border-top-left-radius: 18px; border-top-right-radius: 18px; border: 1px solid #C0C0C0;}
main .section-5 .content-block-2 + .content-block-2{ margin-top: clamp(92px, 11.979vw, 130px);}
main .section-5 .content-block-2 .text-2{ margin-top: clamp(60px, 7.813vw, 110px);}
main .section-5 .content-block-3{ padding-block: clamp(72px, 9.375vw, 120px);}
main .section-5 .content-block-3 .title-6{ margin-bottom: clamp(36px, 4.167vw, 80px);}
main .section-5 .content-block-3 .text-4 + .text-4{ margin-top: clamp(23px, 2.344vw, 45px);}
main .section-5 .content-block-4{ background: #FFFFFF; border-radius: 13px; border: 1px solid #D1D1D1; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; padding: clamp(15px, 1.563vw, 30px);}
main .section-5 .content-block-4 .logo-wrapper{padding: 15px; background: #F8FCFF; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border: 1px solid #D1D1D1; border-radius: 13px;}
main .section-5 .content-block-4 .gallaxy{ display: flex; gap: clamp(7px, 0.521vw, 10px); }
main .section-5 .content-block-4 .universe{ display: flex; align-items: center; gap: 15px;}
main .section-5 .content-block-4 .gallaxy svg{ fill: #FFA40B;}
main .section-5 .content-block-4 .quotes{ font-size: var(--ugc-font-size-20); line-height: 1.8095; color: #4F4F4F; margin-block: clamp(25px, 2.604vw, 50px);  position: relative;}
main .section-5 .content-block-4 .quotes svg{ margin-right: 10px; fill: var(--blue-color);}
main .section-5 .content-block-4 .quotes svg:nth-child(2){ transform: rotate(-180deg); margin-left: 10px;}
main .section-5 .content-block-4 h3{ position: relative; font-size: var(--ugc-font-size-18); font-weight: 600; color: #4F4F4F; padding-left: clamp(40px, 2.344vw, 45px);}
main .section-5 .content-block-4 h3::before{ content: ''; width: 30px; height: 1px; background: #808080; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
main .section-5 .content-block-5{ padding-top: clamp(76px, 9.896vw, 120px);}
main .section-5 .content-block-5 .quotes-2{ background: #F4F4F4; padding: clamp(30px, 3.125vw, 60px) clamp(20px, 2.083vw, 40px); border-radius: 20px; margin-top: clamp(29px, 3.385vw, 65px);}
main .section-5 .content-block-5 .quotes-2 .text-4 + .text-4{ margin-top: clamp(23px, 2.344vw, 45px);}
main .section-5 .content-block-6{ padding-block: clamp(74px, 9.635vw, 185px) clamp(62px, 8.073vw, 155px);}
main .section-5 .content-block-6 .title-7{ margin-bottom: clamp(20px, 2.083vw, 40px);}


main .section-5 .content-block-2.v2 + .content-block-2.v2{ margin-top: clamp(35px, 4.063vw, 78px);}
main .section-5 .content-block-2.v2 .text-2{ margin-top: clamp(41px, 4.688vw, 90px);}
main .section-5 .content-block-3.v2{ padding-bottom: clamp(38px, 4.427vw, 85px);}
main .section-5 .content-block-3.v2{ padding-bottom: clamp(64px, 8.333vw, 100px);}
main .section-2 .content-block-1 .title-2.v2{ max-width: 1165px;}
main .section-5 .content-block-2 .label h5 i{ font-size: var(--ugc-font-size-18); font-weight:700; }



.my-observations-block{ margin:0; padding:30px 25px; background:#F1F0F0; border-radius:20px; }
.my-observations-block .top-block{ margin:0; padding:0 0 28px 0; display:flex; gap:30px; align-items:center; justify-content:center; }
.my-observations-block .top-block h3{ font-family:var(--secondary-font); font-size:25px; font-weight:400; color:#565656; margin:0; padding:0; }
.my-observations-block .top-block p{ font-family:var(--primary-font); font-size:20px; font-weight:400; color:#fff; margin:0; padding:20px 34px; background:#060606; border-radius:30px; position:relative; }
.my-observations-block .top-block p:after{ content:""; position:absolute; width:44px; height:33px; background:url(../images/black-curve-bg.png) no-repeat center; right:-29px; bottom:0; }



.list-card { background:#F1F0F0; border-radius: 20px; padding: 3rem 3rem 3rem 2.5rem; width: 100%; position: relative; }
/* ── Top row: label + speech bubble ── */
.top-row{ margin:0; padding:0 0 28px 0; display:flex; gap:30px; align-items:center; justify-content:center; }
.client-label { font-family:var(--secondary-font); font-size:25px; font-weight:400; color:#565656; margin:0; padding:0; }
.question-bubble{ font-family:var(--primary-font); font-size:20px; font-weight:400; color:#fff; margin:0; padding:20px 34px; background:#060606; border-radius:30px; font-size:18px; position:relative; }
.question-bubble:after{ content:""; position:absolute; width:44px; height:33px; background:url(../images/black-curve-bg.png) no-repeat center; right:-29px; bottom:0; }

.bubbles-col.content{ padding-left:40px; }
.bubbles-col.content .bubble{ position:relative; }
.bubbles-col.content .bubble:before{ content:""; position:absolute; width:50px; height:37px; background:url(../images/white-curve-bg.png) no-repeat center; left:-29px; bottom:0; }


/* ── Main body: bubbles + bracket ── */
.body-row { display: flex; align-items: stretch; gap: 0; position:relative; }
.bubbles-col { display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.bubble{ font-family:var(--primary-font); font-size:20px; font-size:18px; font-weight:400; color:#4F4F4F; margin:0; padding:20px 34px; background:#fff; border-radius:30px; position:relative; box-shadow: 0 1px 4px rgba(0,0,0,0.04); animation: fadeUp 0.4s ease both; width:max-content; }

.bubble:nth-child(1) { animation-delay: 0.05s; }
.bubble:nth-child(2) { animation-delay: 0.12s; }
.bubble:nth-child(3) { animation-delay: 0.19s; }
.bubble:nth-child(4) { animation-delay: 0.26s; }
.bubble:nth-child(5) { animation-delay: 0.33s; }
.bubble:nth-child(6) { animation-delay: 0.40s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); } }

/* ── Bracket + label ── */
.bracket-col { display: flex; align-items: center; padding-left: 1.5rem; flex-shrink: 0; min-width: 160px; position: relative; }
.bracket-svg { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; height: 100%; overflow: visible; }
.bracket-label { font-family:var(--secondary-font); font-size:25px; font-weight:400; color:#565656; margin-left: 52px; white-space: nowrap; position:absolute; right:-24px; }

.bracket-col.image{ position: absolute; top: 26px; right: 100px; max-width: 566px; }
/*.bracket-col.image img{ max-width:560px; }*/

.bracket-col.image.requirter{ max-width:234px; right:260px; }
.bracket-col.image.requirter .bracket-label{ position:initial; margin-left:25px; }
.bracket-col.image.requirter.booking{ max-width:484px; }

.mobile-images-kudo{ display:none; }
.mobile-images-kudo .image img{ width:100%; }


/* ── Responsive ── */
@media (max-width: 600px) {
  .list-card {
    padding: 1.8rem 1.2rem 1.8rem 1.2rem;
    border-radius: 14px;
  }

  .top-row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .client-label {
    padding-top: 0;
    font-size: 1.6rem;
  }

  .question-bubble {
    font-size: 0.86rem;
  }

  .body-row {
    flex-direction: column;
    gap: 1.5rem;
  }

  .bracket-col {
    padding-left: 0;
    min-width: unset;
    padding-top: 0.5rem;
    justify-content: center;
  }

  .bracket-svg {
    display: none;
  }

  .bracket-label {
    margin-left: 0;
    font-size: 1.5rem;
    border-top: 1px solid #aaa;
    padding-top: 0.75rem;
    width: 100%;
    text-align: center;
    font-style: italic;
  }

  .bubble {
    max-width: 100%;
    font-size: 0.85rem;
  }
}