.elementor-13 .elementor-element.elementor-element-23052d2{--display:flex;--position:fixed;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:15px;--padding-bottom:15px;--padding-left:12px;--padding-right:12px;top:0px;--z-index:3;}.elementor-13 .elementor-element.elementor-element-23052d2:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-23052d2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#ffffff;}body:not(.rtl) .elementor-13 .elementor-element.elementor-element-23052d2{left:0px;}body.rtl .elementor-13 .elementor-element.elementor-element-23052d2{right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-13 .elementor-element.elementor-element-d542058{width:var( --container-widget-width, 9% );max-width:9%;--container-widget-width:9%;--container-widget-flex-grow:0;text-align:start;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-13 .elementor-element.elementor-element-53d528c .elementor-menu-toggle{margin:0 auto;}.elementor-13 .elementor-element.elementor-element-53d528c .elementor-nav-menu .elementor-item{font-family:"Be Vietnam Pro", Sans-serif;font-size:16px;font-weight:600;}.elementor-13 .elementor-element.elementor-element-53d528c .elementor-nav-menu--main .elementor-item{color:#000000;fill:#000000;}.elementor-13 .elementor-element.elementor-element-53d528c .elementor-nav-menu--main .elementor-item:hover, .elementor-13 .elementor-element.elementor-element-53d528c .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-13 .elementor-element.elementor-element-53d528c .elementor-nav-menu--main .elementor-item.highlighted, .elementor-13 .elementor-element.elementor-element-53d528c .elementor-nav-menu--main .elementor-item:focus{color:#000000;fill:#000000;}.elementor-13 .elementor-element.elementor-element-53d528c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-13 .elementor-element.elementor-element-53d528c .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#FFFFFF;}.elementor-13 .elementor-element.elementor-element-53d528c .e--pointer-framed .elementor-item:before, .elementor-13 .elementor-element.elementor-element-53d528c .e--pointer-framed .elementor-item:after{border-color:#FFFFFF;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-13 .elementor-element.elementor-element-2152f4e .elementor-button{background-color:#00469C;font-family:"Quicksand", Sans-serif;font-size:16px;font-weight:800;text-transform:capitalize;fill:#FFFFFF;color:#FFFFFF;border-radius:600px 600px 600px 600px;}.elementor-13 .elementor-element.elementor-element-2152f4e .elementor-button:hover, .elementor-13 .elementor-element.elementor-element-2152f4e .elementor-button:focus{background-color:#00469C;color:#FFFFFF;}.elementor-13 .elementor-element.elementor-element-2152f4e .elementor-button:hover svg, .elementor-13 .elementor-element.elementor-element-2152f4e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-13 .elementor-element.elementor-element-54bf25e .elementor-button{background-color:#00469C;font-family:"Quicksand", Sans-serif;font-size:16px;font-weight:800;text-transform:capitalize;fill:#FFFFFF;color:#FFFFFF;border-radius:600px 600px 600px 600px;}.elementor-13 .elementor-element.elementor-element-54bf25e .elementor-button:hover, .elementor-13 .elementor-element.elementor-element-54bf25e .elementor-button:focus{background-color:#00469C;color:#FFFFFF;}.elementor-13 .elementor-element.elementor-element-54bf25e .elementor-button:hover svg, .elementor-13 .elementor-element.elementor-element-54bf25e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-13 .elementor-element.elementor-element-ed49a1c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:91px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-f8452d0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-13 .elementor-element.elementor-element-1f5784d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-5513a79{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-4810550{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-daa79fa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-5dfa67d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-3e18caa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-6e90086{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-554a2ee{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-4b94eb5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:60px 60px;--row-gap:60px;--column-gap:60px;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-7277732{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-f6f55a2{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:25px 25px 25px 25px;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-13 .elementor-element.elementor-element-f6f55a2:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-f6f55a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#12539E;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-13 .elementor-element.elementor-element-05d7791{width:auto;max-width:auto;background-color:#2E62A0;padding:3px 20px 3px 20px;border-radius:20px 20px 20px 20px;}.elementor-13 .elementor-element.elementor-element-05d7791 .elementor-icon-box-wrapper{text-align:start;}.elementor-13 .elementor-element.elementor-element-05d7791 .elementor-icon-box-title{margin-block-end:7px;color:#FFFFFF;}.elementor-13 .elementor-element.elementor-element-05d7791 .elementor-icon-box-title, .elementor-13 .elementor-element.elementor-element-05d7791 .elementor-icon-box-title a{font-family:"Be Vietnam Pro", Sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;}.elementor-13 .elementor-element.elementor-element-05d7791:has(:hover) .elementor-icon-box-title, .elementor-13 .elementor-element.elementor-element-05d7791:has(:focus) .elementor-icon-box-title{color:#FFFFFF;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-13 .elementor-element.elementor-element-579edb9 .elementor-heading-title{font-family:"Baloo 2", Sans-serif;font-size:39px;font-weight:700;color:#FFFFFF;}.elementor-13 .elementor-element.elementor-element-ef4f1d3 .elementor-heading-title{font-family:"Baloo 2", Sans-serif;font-size:39px;font-weight:700;color:#FFFFFF;}.elementor-widget-fluent-form-widget .fluentform-widget-description{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-fluent-form-widget .ff-el-progress-status{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-fluent-form-widget .ff-el-progress-bar span{color:var( --e-global-color-primary );}.elementor-widget-fluent-form-widget .step-nav button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-13 .elementor-element.elementor-element-6ee4771{width:var( --container-widget-width, 74% );max-width:74%;--container-widget-width:74%;--container-widget-flex-grow:0;}.elementor-13 .elementor-element.elementor-element-6ee4771 .fluentform-widget-wrapper .ff-el-input--label label{color:#FFFFFF;font-family:"Be Vietnam Pro", Sans-serif;}.elementor-13 .elementor-element.elementor-element-6ee4771 .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{width:28%;background-color:#FFFFFF !important;color:#12539E !important;padding:11px 11px 11px 11px;font-family:"Baloo 2", Sans-serif;font-size:21px;}.elementor-13 .elementor-element.elementor-element-2a14846{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-3a53ab1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-3a53ab1:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-3a53ab1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A2350;}.elementor-13 .elementor-element.elementor-element-b2a6650{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-e93e181{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-9ee4aef{text-align:start;}.elementor-13 .elementor-element.elementor-element-9ee4aef img{width:64%;}.elementor-13 .elementor-element.elementor-element-3234eb0{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-13 .elementor-element.elementor-element-e3f7d69 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-13 .elementor-element.elementor-element-e3f7d69 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-13 .elementor-element.elementor-element-e3f7d69{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-13 .elementor-element.elementor-element-e3f7d69 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-13 .elementor-element.elementor-element-e3f7d69 .elementor-icon-list-item > a{font-family:"Be Vietnam Pro", Sans-serif;font-weight:500;}.elementor-13 .elementor-element.elementor-element-e3f7d69 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-13 .elementor-element.elementor-element-6001fe9 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-13 .elementor-element.elementor-element-6001fe9 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-13 .elementor-element.elementor-element-6001fe9{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-13 .elementor-element.elementor-element-6001fe9 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-13 .elementor-element.elementor-element-6001fe9 .elementor-icon-list-item > a{font-family:"Be Vietnam Pro", Sans-serif;font-weight:500;}.elementor-13 .elementor-element.elementor-element-6001fe9 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}@media(min-width:768px){.elementor-13 .elementor-element.elementor-element-23052d2{--content-width:1200px;}.elementor-13 .elementor-element.elementor-element-4b94eb5{--content-width:1200px;}.elementor-13 .elementor-element.elementor-element-f6f55a2{--width:100%;}.elementor-13 .elementor-element.elementor-element-3a53ab1{--content-width:1200px;}.elementor-13 .elementor-element.elementor-element-e93e181{--width:16%;}.elementor-13 .elementor-element.elementor-element-3234eb0{--width:84%;}}@media(max-width:1024px){.elementor-13 .elementor-element.elementor-element-23052d2{--padding-top:20px;--padding-bottom:20px;--padding-left:15px;--padding-right:15px;}.elementor-13 .elementor-element.elementor-element-d542058{padding:0px 90px 0px 0px;}.elementor-13 .elementor-element.elementor-element-d542058 img{width:133px;}}@media(max-width:767px){.elementor-13 .elementor-element.elementor-element-23052d2{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-13 .elementor-element.elementor-element-d542058{padding:0px 0px 0px 0px;--container-widget-width:22%;--container-widget-flex-grow:0;width:var( --container-widget-width, 22% );max-width:22%;}.elementor-13 .elementor-element.elementor-element-d542058 img{width:129px;}.elementor-13 .elementor-element.elementor-element-2152f4e .elementor-button{font-size:13px;padding:15px 20px 15px 20px;}.elementor-13 .elementor-element.elementor-element-54bf25e .elementor-button{font-size:13px;padding:15px 20px 15px 20px;}.elementor-13 .elementor-element.elementor-element-4b94eb5{--padding-top:30px;--padding-bottom:30px;--padding-left:10px;--padding-right:10px;}.elementor-13 .elementor-element.elementor-element-f6f55a2{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-13 .elementor-element.elementor-element-579edb9{text-align:start;}.elementor-13 .elementor-element.elementor-element-579edb9 .elementor-heading-title{font-size:30px;}.elementor-13 .elementor-element.elementor-element-ef4f1d3{text-align:start;}.elementor-13 .elementor-element.elementor-element-ef4f1d3 .elementor-heading-title{font-size:30px;}.elementor-13 .elementor-element.elementor-element-6ee4771{width:100%;max-width:100%;}.elementor-13 .elementor-element.elementor-element-6ee4771 .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .elementor-13 .elementor-element.elementor-element-6ee4771 .fluentform-widget-wrapper .ff-el-group select{height:2.8em;}.elementor-13 .elementor-element.elementor-element-3a53ab1{--padding-top:50px;--padding-bottom:50px;--padding-left:10px;--padding-right:10px;}.elementor-13 .elementor-element.elementor-element-9ee4aef{text-align:start;}.elementor-13 .elementor-element.elementor-element-9ee4aef img{width:35%;}}/* Start custom CSS for button, class: .elementor-element-54bf25e *//* nút pulse */ .pulse_btn .elementor-button{ position: relative; animation: pulseBtn 2s infinite; transition: all .35s ease; } /* vòng sáng lan ra */ .pulse_btn .elementor-button::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; z-index: -1; animation: pulseRing 2s infinite; } /* hover */ .pulse_btn .elementor-button:hover{ transform: scale(1.05); } @keyframes pulseBtn{ 0%{ transform: scale(1); } 50%{ transform: scale(1.04); } 100%{ transform: scale(1); } } @keyframes pulseRing{ 0%{ transform: scale(1); opacity: .6; } 70%{ transform: scale(1.25); opacity: 0; } 100%{ opacity: 0; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-23052d2 */h2 { font-size: clamp(33px, 5vw, 54px) !important; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-f8452d0 *//* ========================================================= HERO SECTION ========================================================= */ :root { --primary: #0c2d61; --primary-dark: #08234b; --orange: #ff9d00; --orange-dark: #f58200; --green: #69b53f; --text: #18325b; --text-light: #65728a; --white: #ffffff; --container: 1280px; --radius: 14px; --transition: all 0.3s ease; } /* ========================================================= RESET ========================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Be Vietnam Pro", Arial, sans-serif; color: var(--text); background: #ffffff; } img { max-width: 100%; display: block; } a { text-decoration: none; } /* ========================================================= CONTAINER ========================================================= */ .container { width: min( calc(100% - 48px), var(--container) ); margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .hero { position: relative; overflow: hidden; background: linear-gradient( 90deg, #ffffff 0%, #ffffff 45%, #f4f8ff 100% ); padding: 60px 0 0; } .hero .container { display: grid; grid-template-columns: minmax(420px, 0.95fr) minmax(600px, 1.25fr); align-items: center; min-height: 580px; } /* ========================================================= HERO CONTENT ========================================================= */ .hero__content { position: relative; padding: 40px 0 80px; } .hero__badge { display: inline-flex; align-items: center; padding: 8px 16px; margin-bottom: 18px; border-radius: 999px; background: linear-gradient( 90deg, #e9eef7, #ffffff ); color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: 0.2px; } /* ========================================================= TITLE ========================================================= */ .hero__title { max-width: 620px; color: var(--primary); font-size: clamp( 33px, 4vw, 40px ); line-height: 1.18; font-weight: 900; letter-spacing: -1.5px; text-transform: uppercase; } .hero__title span { display: block; color: var(--orange); margin-top: 2px; } .hero__title strong { display: block; color: var(--primary); font-weight: 900; } /* ========================================================= DESCRIPTION ========================================================= */ .hero__description { max-width: 520px; margin-top: 22px; color: var(--text-light); font-size: 16px; line-height: 1.7; font-weight: 500; } /* ========================================================= SCORE LIST ========================================================= */ .hero__scores { display: flex; align-items: center; gap: 8px; margin-top: 22px; } .score { min-width: 64px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #ffffff; font-size: 17px; font-weight: 800; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .score--5 { background: #69b53f; } .score--55 { background: #8d63b7; } .score--6 { background: #4f9ed0; } .score--65 { background: #a44c9a; } .score--7 { background: #d92d2d; } /* ========================================================= NOTE ========================================================= */ .hero__note { margin-top: 16px; color: var(--primary); font-size: 14px; font-weight: 700; } .hero__subnote { margin-top: 7px; color: #7d8798; font-size: 14px; line-height: 1.6; } /* ========================================================= ACTIONS ========================================================= */ .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .btn { min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: 800; transition: var(--transition); white-space: nowrap; } .btn--primary { background: linear-gradient( 135deg, #ffb000, #f58200 ); color: #ffffff; box-shadow: 0 10px 25px rgba(245, 130, 0, 0.22); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(245, 130, 0, 0.3); } .btn--secondary { background: #ffffff; border: 1px solid #d8e0ea; color: var(--primary); } .btn--secondary:hover { border-color: var(--primary); background: #f4f8ff; } /* ========================================================= HERO VISUAL ========================================================= */ .hero__visual { position: relative; align-self: stretch; min-height: 580px; display: flex; align-items: center; justify-content: center; overflow: visible; } /* ========================================================= BACKGROUND ========================================================= */ .hero__background { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(235,242,255,0.3) 30%, rgba(225,240,255,0.75) 100% ); z-index: 1; } /* ========================================================= STUDENTS IMAGE ========================================================= */ img.hero__students { border-radius: 20px; } .hero__students { position: relative; z-index: 2; width: 100%; max-width: 850px; height: 560px; object-fit: contain; object-position: bottom center; filter: drop-shadow( 0 20px 30px rgba(20, 45, 80, 0.15) ); } /* ========================================================= FLOATING SCORES ========================================================= */ .hero__floating-scores { position: absolute; z-index: 5; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; } .floating-score { width: 68px; height: 68px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffffff; border: 3px solid rgba(255,255,255,0.9); box-shadow: 0 8px 20px rgba(0,0,0,0.15); transform: translateX(10px); transition: var(--transition); } .floating-score:hover { transform: translateX(-5px) scale(1.08); } .floating-score strong { font-size: 20px; line-height: 1; font-weight: 900; } .floating-score span { margin-top: 3px; font-size: 8px; font-weight: 800; } .floating-score--7 { background: #d92d2d; } .floating-score--65 { background: #8b6db3; } .floating-score--6 { background: #4f9ed0; } .floating-score--55 { background: #8d63b7; } .floating-score--5 { background: #69b53f; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .hero .container { grid-template-columns: 1fr 1fr; } .hero__title { font-size: 44px; } .hero__students { height: 500px; } .hero__visual { min-height: 500px; } .floating-score { width: 58px; height: 58px; } .floating-score strong { font-size: 17px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { .container { width: calc(100% - 32px); } .hero { padding: 25px 0 0; background: linear-gradient( 180deg, #ffffff 0%, #ffffff 60%, #edf5ff 100% ); } .hero .container { display: flex; flex-direction: column; min-height: auto; } /* CONTENT */ .hero__content { width: 100%; padding: 15px 0 25px; } .hero__badge { font-size: 9px; padding: 7px 12px; margin-bottom: 14px; } .hero__title { max-width: 100%; font-size: 34px; line-height: 1.18; letter-spacing: -0.8px; } .hero__description { margin-top: 16px; font-size: 14px; line-height: 1.6; } /* SCORES */ .hero__scores { gap: 5px; margin-top: 18px; flex-wrap: nowrap; } .score { flex: 1; min-width: 0; height: 34px; font-size: 14px; } .hero__note { font-size: 13px; margin-top: 14px; } .hero__subnote { font-size: 12px; } /* BUTTONS */ .hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 22px; } .btn { width: 100%; min-height: 50px; font-size: 12px; } /* VISUAL */ .hero__visual { width: calc(100% + 32px); min-height: 390px; margin-top: 0; order: 2; } .hero__students { width: 100%; height: 390px; object-fit: contain; object-position: bottom center; } .hero__background { background: linear-gradient( 180deg, rgba(237,245,255,0.1), rgba(221,236,255,0.9) ); } /* FLOATING SCORES */ .hero__floating-scores { right: 10px; gap: 5px; } .floating-score { width: 46px; height: 46px; border-width: 2px; } .floating-score strong { font-size: 14px; } .floating-score span { font-size: 6px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .hero__title { font-size: 29px; } .hero__badge { font-size: 8px; } .hero__visual { min-height: 340px; } .hero__students { height: 340px; } .floating-score { width: 42px; height: 42px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ed49a1c */h2 { font-size: clamp(33px, 5vw, 54px) !important; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-48377cc *//* ========================================================= SECTION 02 NHỮNG CON SỐ BIẾT NÓI ========================================================= */ .stats-section { position: relative; overflow: hidden; padding: 42px 0 38px; background: linear-gradient( 135deg, #08224d 0%, #0d3775 50%, #0a2b5f 100% ); color: #ffffff; } /* ========================================================= BACKGROUND DECORATION ========================================================= */ .stats-section::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -220px; bottom: -280px; border: 1px solid rgba(255, 255, 255, 0.08); } .stats-section::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; left: -180px; top: -180px; border: 1px solid rgba(255, 255, 255, 0.05); } /* ========================================================= CONTAINER ========================================================= */ .stats-section .container { position: relative; z-index: 2; } /* ========================================================= TITLE ========================================================= */ .stats-section__title { margin: 0 0 28px; text-align: center; font-size: clamp( 22px, 2.2vw, 30px ); line-height: 1.2; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; color: #ffffff; } /* ========================================================= STATS GRID ========================================================= */ .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 1000px; margin: 0 auto; position: relative; } /* ========================================================= STAT CARD ========================================================= */ .stat-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 95px; padding: 8px 20px; } /* Vertical divider */ .stat-card:not(:last-child)::after { content: ""; position: absolute; width: 1px; height: 48px; right: 0; top: 50%; transform: translateY(-50%); background: linear-gradient( to bottom, transparent, rgba(255,255,255,0.4), transparent ); } /* ========================================================= SCORE ========================================================= */ .stat-card__score { font-size: clamp( 38px, 4vw, 54px ); line-height: 1; font-weight: 900; letter-spacing: -1.5px; margin-bottom: 7px; transition: transform 0.3s ease; } .stat-card:hover .stat-card__score { transform: translateY(-4px); } /* ========================================================= IELTS LABEL ========================================================= */ .stat-card__label { color: rgba(255,255,255,0.9); font-size: 14px; line-height: 1; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } /* ========================================================= SCORE COLORS ========================================================= */ .stat-card__score--5 { color: #82cf4e; } .stat-card__score--55 { color: #b28bd6; } .stat-card__score--6 { color: #78c4ec; } .stat-card__score--65 { color: #d38ed3; } .stat-card__score--7 { color: #ff5353; } /* ========================================================= DESCRIPTION ========================================================= */ .stats-section__description { max-width: 700px; margin: 24px auto 0; text-align: center; color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.6; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .stats-section { padding: 38px 0 34px; } .stats-grid { max-width: 760px; } .stat-card { min-height: 85px; padding: 8px 12px; } .stat-card__label { font-size: 12px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { .stats-section { padding: 32px 0; } .stats-section__title { margin-bottom: 24px; font-size: 22px; } .stats-grid { grid-template-columns: repeat(5, 1fr); gap: 0; width: 100%; } .stat-card { min-height: 78px; padding: 5px 3px; } .stat-card:not(:last-child)::after { height: 42px; } .stat-card__score { font-size: clamp( 24px, 7vw, 36px ); letter-spacing: -1px; margin-bottom: 5px; } .stat-card__label { font-size: 9px; letter-spacing: 0.5px; } .stats-section__description { max-width: 310px; margin-top: 22px; font-size: 12px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .stats-section__title { font-size: 20px; } .stat-card__score { font-size: 27px; } .stat-card__label { font-size: 8px; } .stat-card:not(:last-child)::after { height: 38px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-58191c1 *//* ========================================= SECTION 3 - STUDENT RESULTS ========================================= */ .student-results.sec3 { grid-template-columns: unset; padding: 120px 24px; margin-top: 0px; } .student-results { position: relative; padding: 120px 24px; background: #f7f9fc; overflow: hidden; } /* Background decoration */ .student-results::before { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(79, 70, 229, 0.06); top: -250px; right: -200px; pointer-events: none; } .student-results::after { content: ""; position: absolute; width: 450px; height: 450px; border-radius: 50%; background: rgba(249, 115, 22, 0.05); bottom: -250px; left: -180px; pointer-events: none; } .student-results__container { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; } /* ========================================= HEADING ========================================= */ .student-results__heading { max-width: 780px; margin-bottom: 64px; } .section-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; margin-bottom: 22px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: #4f46e5; background: rgba(79, 70, 229, 0.08); border-radius: 999px; } .section-badge__dot { width: 8px; height: 8px; background: #f97316; border-radius: 50%; box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.12); } .student-results__heading h2 { margin: 0 0 22px; font-size: clamp(38px, 5vw, 50px); line-height: 1.1; letter-spacing: -2px; font-weight: 800; color: #172554; } .student-results__heading h2 span { color: #f97316; } .student-results__heading p { max-width: 680px; margin: 0; font-size: 17px; line-height: 1.8; color: #64748b; } /* ========================================= CONTENT LAYOUT ========================================= */ .student-results__content { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: stretch; } /* ========================================= FEATURED RESULT ========================================= */ .result-featured { min-height: 760px; } .result-featured__image { position: relative; width: 100%; height: 100%; min-height: 760px; overflow: hidden; border-radius: 28px; background: #172554; } .result-featured__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.7s ease; } .result-featured:hover img { transform: scale(1.04); } .result-featured__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 23, 42, 0.05) 20%, rgba(15, 23, 42, 0.9) 100% ); } .result-featured__content { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px; color: #ffffff; } .result-featured__label { display: inline-flex; padding: 8px 14px; margin-bottom: 18px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); } .result-featured__content h3 { margin: 0 0 18px; font-size: clamp(30px, 3vw, 48px); line-height: 1.12; letter-spacing: -1px; font-weight: 800; } .result-featured__content p { max-width: 520px; margin: 0 0 28px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.8); } .result-featured__button { display: inline-flex; align-items: center; gap: 14px; padding: 14px 20px; color: #172554; background: #ffffff; text-decoration: none; border-radius: 12px; font-size: 14px; font-weight: 700; transition: all 0.3s ease; } .result-featured__button span { font-size: 20px; line-height: 1; } .result-featured__button:hover { transform: translateY(-3px); background: #f97316; color: #ffffff; } /* ========================================= RESULT GRID ========================================= */ .results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .result-card { display: flex; flex-direction: column; min-height: 368px; overflow: hidden; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 24px; box-shadow: 0 15px 50px rgba(15, 23, 42, 0.05); transition: transform 0.35s ease, box-shadow 0.35s ease; } .result-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12); } .result-card__image { position: relative; height: 210px; overflow: hidden; background: #e2e8f0; } .result-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .result-card:hover .result-card__image img { transform: scale(1.08); } /* Score badge */ .score-badge { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 72px; background: #ffffff; border-radius: 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18); } .score-badge span { margin-bottom: 2px; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #64748b; } .score-badge strong { font-size: 24px; line-height: 1; color: #f97316; } /* Card body */ .result-card__body { flex: 1; padding: 24px; } .result-card__tag { display: inline-block; margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #4f46e5; } .result-card__body h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.35; font-weight: 750; color: #172554; } .result-card__body p { margin: 0; font-size: 14px; line-height: 1.65; color: #64748b; } /* ========================================= BOTTOM STATS ========================================= */ .student-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 32px; background: #172554; border-radius: 24px; overflow: hidden; } .student-stat { position: relative; padding: 34px 32px; color: #ffffff; } .student-stat:not(:last-child)::after { content: ""; position: absolute; top: 24px; right: 0; bottom: 24px; width: 1px; background: rgba(255, 255, 255, 0.15); } .student-stat strong { display: block; margin-bottom: 8px; font-size: 38px; line-height: 1; font-weight: 800; color: #fbbf24; } .student-stat span { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); } /* ========================================= TABLET ========================================= */ @media (max-width: 1024px) { .student-results { padding: 90px 20px; } .student-results__content { grid-template-columns: 1fr; } .result-featured, .result-featured__image { min-height: 600px; } .results-grid { grid-template-columns: repeat(2, 1fr); } .result-card { min-height: 360px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 768px) { .student-results { padding: 72px 16px; } .student-results__heading { margin-bottom: 40px; } .student-results__heading h2 { font-size: 38px; letter-spacing: -1.5px; } .student-results__heading p { font-size: 15px; line-height: 1.7; } .student-results__content { gap: 16px; } .result-featured, .result-featured__image { min-height: 540px; } .result-featured__content { padding: 28px 24px; } .result-featured__content h3 { font-size: 32px; } .result-featured__content p { font-size: 14px; } .results-grid { grid-template-columns: 1fr; gap: 16px; } .result-card { min-height: auto; border-radius: 20px; } .result-card__image { height: 260px; } .result-card__body { padding: 22px; } .student-stats { grid-template-columns: 1fr; margin-top: 20px; border-radius: 20px; } .student-stat { padding: 26px 24px; } .student-stat:not(:last-child)::after { top: auto; right: 24px; bottom: 0; left: 24px; width: auto; height: 1px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .student-results__heading h2 { font-size: 32px; } .section-badge { font-size: 10px; } .result-featured, .result-featured__image { min-height: 500px; } .result-featured__content h3 { font-size: 27px; } .result-featured__button { width: 100%; justify-content: center; } .result-card__image { height: 230px; } .student-stat strong { font-size: 32px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7bfb23c *//* ========================================= SECTION 4 - VERIFIED REVIEWS ========================================= */ .verified-reviews { position: relative; padding: 120px 24px; background: #ffffff; overflow: hidden; } /* Background decoration */ .verified-reviews::before { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; top: -350px; left: -250px; background: rgba(79, 70, 229, 0.05); pointer-events: none; } .verified-reviews__container { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; } /* ========================================= SECTION HEADING ========================================= */ .verified-reviews__heading { max-width: 760px; margin: 0 auto 64px; text-align: center; } .review-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: 22px; border-radius: 999px; background: #ecfdf5; color: #059669; font-size: 12px; font-weight: 800; letter-spacing: 1px; } .review-badge__icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #059669; color: #ffffff; font-size: 11px; } .verified-reviews__heading h2 { margin: 0 0 20px; font-size: clamp(38px, 5vw, 64px); line-height: 1.1; letter-spacing: -2px; font-weight: 800; color: #172554; } .verified-reviews__heading h2 span { color: #f97316; } .verified-reviews__heading p { margin: 0; font-size: 17px; line-height: 1.8; color: #64748b; } /* ========================================= MAIN REVIEW SHOWCASE ========================================= */ .review-showcase { display: grid; grid-template-columns: 360px 1fr; overflow: hidden; background: #ffffff; border-radius: 28px; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.08); } /* ========================================= LEFT RATING ========================================= */ .review-rating { display: flex; flex-direction: column; justify-content: space-between; padding: 52px 42px; background: linear-gradient( 135deg, #172554, #1e3a8a ); color: #ffffff; } .review-rating__small { display: block; margin-bottom: 20px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.6); } .review-rating__score { margin-bottom: 14px; font-size: 96px; line-height: 1; font-weight: 800; letter-spacing: -5px; color: #ffffff; } .review-rating__stars { margin-bottom: 12px; color: #fbbf24; font-size: 24px; letter-spacing: 2px; } .review-rating__top p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.65); } .review-rating__divider { width: 100%; height: 1px; margin: 40px 0; background: rgba(255, 255, 255, 0.15); } .review-rating__location { display: flex; align-items: flex-start; gap: 14px; } .location-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); font-size: 18px; } .review-rating__location span { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: rgba(255, 255, 255, 0.55); } .review-rating__location p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); } /* ========================================= RIGHT CONTENT ========================================= */ .review-content { padding: 56px; } .review-content__verified { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .verified-check { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #059669; color: #ffffff; font-size: 17px; font-weight: 700; } .review-content__verified strong { display: block; margin-bottom: 3px; font-size: 13px; color: #172554; } .review-content__verified span { font-size: 12px; color: #94a3b8; } .review-content h3 { margin: 0 0 18px; font-size: clamp(28px, 3vw, 42px); line-height: 1.2; letter-spacing: -1.2px; font-weight: 800; color: #172554; } .review-content h3 span { color: #4f46e5; } .review-content__description { max-width: 760px; margin: 0 0 40px; font-size: 16px; line-height: 1.8; color: #64748b; } /* ========================================= REVIEW HIGHLIGHTS ========================================= */ .review-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .review-highlight { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 18px; background: #f8fafc; transition: transform 0.3s ease, background 0.3s ease; } .review-highlight:hover { transform: translateY(-4px); background: #eef2ff; } .review-highlight__number { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: #ffffff; color: #f97316; font-size: 13px; font-weight: 800; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } .review-highlight h4 { margin: 2px 0 7px; font-size: 15px; line-height: 1.4; color: #172554; } .review-highlight p { margin: 0; font-size: 13px; line-height: 1.6; color: #64748b; } /* ========================================= TRUST GRID ========================================= */ .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; } .trust-card { display: flex; align-items: flex-start; gap: 16px; padding: 28px; border-radius: 20px; background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .trust-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); } .trust-card__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: #ffffff; font-size: 22px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); } .trust-card h4 { margin: 3px 0 8px; font-size: 17px; color: #172554; } .trust-card p { margin: 0; font-size: 14px; line-height: 1.65; color: #64748b; } /* Highlight card */ .trust-card--highlight { background: #fff7ed; border-color: rgba(249, 115, 22, 0.15); } .trust-card--highlight .trust-card__icon { background: #f97316; } /* ========================================= CTA ========================================= */ .review-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 64px; padding: 42px 48px; border-radius: 28px; background: linear-gradient( 135deg, #4f46e5, #7c3aed ); color: #ffffff; } .review-cta__content span { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.65); } .review-cta__content h3 { margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.25; font-weight: 750; } .review-cta__button { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; padding: 17px 24px; border-radius: 14px; background: #ffffff; color: #4f46e5; text-decoration: none; font-size: 14px; font-weight: 800; transition: transform 0.3s ease, background 0.3s ease; } .review-cta__button span { font-size: 22px; line-height: 1; } .review-cta__button:hover { transform: translateY(-3px); background: #fbbf24; color: #172554; } /* ========================================= TABLET ========================================= */ @media (max-width: 1024px) { .verified-reviews { padding: 90px 20px; } .review-showcase { grid-template-columns: 1fr; } .review-rating { padding: 45px 40px; } .review-rating__divider { margin: 30px 0; } .review-rating__location { max-width: 500px; } .review-content { padding: 45px 40px; } .trust-grid { grid-template-columns: 1fr; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 768px) { .verified-reviews { padding: 72px 16px; } .verified-reviews__heading { margin-bottom: 42px; } .verified-reviews__heading h2 { font-size: 38px; letter-spacing: -1.5px; } .verified-reviews__heading p { font-size: 15px; } .review-showcase { border-radius: 22px; } .review-rating { padding: 38px 28px; } .review-rating__score { font-size: 76px; } .review-rating__stars { font-size: 20px; } .review-content { padding: 36px 24px; } .review-content h3 { font-size: 29px; } .review-content__description { font-size: 15px; margin-bottom: 28px; } .review-highlights { grid-template-columns: 1fr; } .review-highlight { padding: 18px; } .trust-grid { gap: 14px; margin-top: 16px; } .trust-card { padding: 22px; } .review-cta { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 42px; padding: 32px 26px; border-radius: 22px; } .review-cta__button { width: 100%; justify-content: center; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .verified-reviews__heading h2 { font-size: 32px; } .review-badge { font-size: 10px; } .review-rating { padding: 32px 22px; } .review-rating__score { font-size: 68px; } .review-content { padding: 30px 20px; } .review-content h3 { font-size: 25px; } .review-highlight { gap: 12px; } .review-highlight__number { width: 38px; height: 38px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-e5faa30 *//* ========================================= SECTION 5 - IELTS ROADMAP ========================================= */ .ielts-roadmap { position: relative; padding: 120px 24px; overflow: hidden; background: linear-gradient( 180deg, #f8fafc 0%, #eef4ff 100% ); } /* ========================================= CONTAINER ========================================= */ .ielts-roadmap__container { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; } /* ========================================= BACKGROUND DECORATION ========================================= */ .ielts-roadmap::before { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; top: -280px; right: -220px; background: rgba(79, 70, 229, 0.07); } .ielts-roadmap::after { content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%; bottom: -250px; left: -200px; background: rgba(249, 115, 22, 0.06); } /* ========================================= HEADING ========================================= */ .ielts-roadmap__heading { max-width: 850px; margin: 0 auto 80px; text-align: center; } .roadmap-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: 22px; border-radius: 999px; background: rgba(79, 70, 229, 0.08); color: #4f46e5; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; } .roadmap-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: #f97316; box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.12); } .ielts-roadmap__heading h2 { margin: 0 0 20px; font-size: clamp(38px, 5vw, 64px); line-height: 1.1; letter-spacing: -2px; font-weight: 800; color: #172554; } .ielts-roadmap__heading h2 span { color: #f97316; } .ielts-roadmap__heading p { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.8; color: #64748b; } /* ========================================= ROADMAP WRAPPER ========================================= */ .roadmap { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* ========================================= ROADMAP LINE ========================================= */ .roadmap__line { position: absolute; top: 48px; left: 12%; right: 12%; height: 2px; background: #dbe4f0; z-index: 0; } .roadmap__line-progress { width: 100%; height: 100%; background: linear-gradient( 90deg, #4f46e5, #7c3aed, #f97316 ); transform-origin: left; animation: roadmapLine 2s ease forwards; } @keyframes roadmapLine { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ========================================= ROADMAP CARD ========================================= */ .roadmap-card { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 520px; padding: 28px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 24px; box-shadow: 0 15px 40px rgba(15, 23, 42, 0.05); transition: transform 0.35s ease, box-shadow 0.35s ease; } .roadmap-card:hover { transform: translateY(-10px); box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12); } /* ========================================= CARD TOP ========================================= */ .roadmap-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .roadmap-card__number { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #172554; color: #ffffff; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 7px #f8fafc; } .roadmap-card__school { padding: 7px 11px; border-radius: 999px; background: #eef2ff; color: #4f46e5; font-size: 10px; font-weight: 800; letter-spacing: 1px; } /* ========================================= ACTIVE CARD ========================================= */ .roadmap-card--active { border-color: rgba(79, 70, 229, 0.25); } .roadmap-card--active .roadmap-card__number { background: #4f46e5; } .roadmap-card--result .roadmap-card__number { background: #f97316; } .roadmap-card--result { border-color: rgba(249, 115, 22, 0.2); } /* ========================================= ICON ========================================= */ .roadmap-card__icon { display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; margin-bottom: 24px; border-radius: 22px; background: linear-gradient( 135deg, #eef2ff, #f5f3ff ); font-size: 32px; } .roadmap-card--result .roadmap-card__icon { background: linear-gradient( 135deg, #fff7ed, #ffedd5 ); } /* ========================================= TEXT ========================================= */ .roadmap-card h3 { margin: 0 0 14px; font-size: 24px; line-height: 1.25; font-weight: 800; color: #172554; } .roadmap-card > p { margin: 0 0 24px; min-height: 96px; font-size: 14px; line-height: 1.7; color: #64748b; } /* ========================================= CHECK LIST ========================================= */ .roadmap-card__list { margin: 0; padding: 0; list-style: none; } .roadmap-card__list li { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 13px; color: #475569; } .roadmap-card__list span { display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: #ecfdf5; color: #059669; font-size: 10px; font-weight: 800; } /* ========================================= TARGET ========================================= */ .roadmap-card__target { margin-top: auto; padding-top: 22px; border-top: 1px solid #e2e8f0; } .roadmap-card__target span { display: block; margin-bottom: 7px; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #94a3b8; } .roadmap-card__target strong { display: block; font-size: 14px; line-height: 1.5; color: #172554; } /* ========================================= BOTTOM MESSAGE ========================================= */ .roadmap-message { display: flex; align-items: center; gap: 24px; margin-top: 56px; padding: 32px 36px; border-radius: 24px; background: #172554; color: #ffffff; } .roadmap-message__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 60px; height: 60px; border-radius: 18px; background: rgba(255, 255, 255, 0.1); font-size: 28px; } .roadmap-message__content { flex: 1; } .roadmap-message__content > span { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: #fbbf24; } .roadmap-message__content h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.35; color: #ffffff; } .roadmap-message__content p { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.68); } /* ========================================= CTA BUTTON ========================================= */ .roadmap-message__button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0; padding: 16px 22px; border-radius: 14px; background: #f97316; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 800; transition: transform 0.3s ease, background 0.3s ease; } .roadmap-message__button span { font-size: 20px; } .roadmap-message__button:hover { transform: translateY(-3px); background: #ea580c; } /* ========================================= TABLET ========================================= */ @media (max-width: 1100px) { .roadmap { grid-template-columns: repeat(2, 1fr); gap: 24px; } .roadmap__line { display: none; } .roadmap-card { min-height: 480px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 768px) { .ielts-roadmap { padding: 72px 16px; } .ielts-roadmap__heading { margin-bottom: 46px; text-align: left; } .ielts-roadmap__heading h2 { font-size: 38px; letter-spacing: -1.5px; } .ielts-roadmap__heading p { margin: 0; font-size: 15px; } .roadmap { grid-template-columns: 1fr; gap: 16px; } .roadmap-card { min-height: auto; padding: 24px; border-radius: 20px; } .roadmap-card__top { margin-bottom: 22px; } .roadmap-card__icon { width: 62px; height: 62px; margin-bottom: 20px; border-radius: 18px; font-size: 27px; } .roadmap-card h3 { font-size: 22px; } .roadmap-card > p { min-height: auto; margin-bottom: 20px; } .roadmap-message { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 32px; padding: 28px 24px; border-radius: 20px; } .roadmap-message__icon { width: 52px; height: 52px; font-size: 24px; } .roadmap-message__content h3 { font-size: 21px; } .roadmap-message__button { width: 100%; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .ielts-roadmap__heading h2 { font-size: 32px; } .roadmap-badge { font-size: 9px; } .roadmap-card { padding: 20px; } .roadmap-card__number { width: 38px; height: 38px; } .roadmap-card__school { font-size: 9px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-41557b2 *//* ========================================= SECTION 6 - WHY POPOODOO ========================================= */ .why-popodoo { position: relative; padding: 120px 24px; overflow: hidden; background: #ffffff; } /* Background decoration */ .why-popodoo::before { content: ""; position: absolute; width: 520px; height: 520px; top: 180px; right: -300px; border-radius: 50%; background: rgba(79, 70, 229, 0.05); pointer-events: none; } .why-popodoo__container { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; } /* ========================================= SECTION HEADER ========================================= */ .why-popodoo__heading { max-width: 800px; margin-bottom: 72px; } .why-popodoo__badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: 22px; border-radius: 999px; background: rgba(79, 70, 229, 0.08); color: #4f46e5; font-size: 11px; font-weight: 800; letter-spacing: 1px; } .why-popodoo__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #f97316; box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.12); } .why-popodoo__heading h2 { margin: 0 0 22px; font-size: clamp(40px, 5vw, 64px); line-height: 1.1; letter-spacing: -2px; font-weight: 800; color: #172554; } .why-popodoo__heading h2 span { color: #f97316; } .why-popodoo__heading p { max-width: 700px; margin: 0; font-size: 17px; line-height: 1.8; color: #64748b; } /* ========================================= MAIN GRID ========================================= */ .why-popodoo__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 80px; align-items: center; } /* ========================================= VISUAL AREA ========================================= */ .why-popodoo__visual { position: relative; min-height: 680px; } /* Main image */ .why-popodoo__main-image { position: absolute; top: 0; left: 0; width: 82%; height: 620px; overflow: hidden; border-radius: 30px; background: #e2e8f0; box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12); } .why-popodoo__main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .why-popodoo__main-image:hover img { transform: scale(1.05); } /* Overlay */ .why-popodoo__image-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 40%, rgba(15, 23, 42, 0.35) ); } /* Small image */ .why-popodoo__small-image { position: absolute; right: 0; bottom: 0; width: 48%; height: 260px; overflow: hidden; border: 8px solid #ffffff; border-radius: 24px; background: #e2e8f0; box-shadow: 0 25px 60px rgba(15, 23, 42, 0.16); } .why-popodoo__small-image img { width: 100%; height: 100%; object-fit: cover; } /* Floating rating */ .why-popodoo__floating-card { position: absolute; left: 28px; bottom: 28px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); box-shadow: 0 15px 40px rgba(15, 23, 42, 0.18); } .why-popodoo__floating-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: #fbbf24; color: #ffffff; font-size: 18px; } .why-popodoo__floating-card strong { display: block; margin-bottom: 2px; font-size: 15px; color: #172554; } .why-popodoo__floating-card span { display: block; font-size: 11px; color: #64748b; } /* ========================================= FEATURES ========================================= */ .why-popodoo__content { display: flex; flex-direction: column; gap: 0; } .why-feature { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid #e2e8f0; } .why-feature:first-child { padding-top: 0; } .why-feature__number { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: #eef2ff; color: #4f46e5; font-size: 12px; font-weight: 800; transition: background 0.3s ease, color 0.3s ease; } .why-feature:hover .why-feature__number { background: #4f46e5; color: #ffffff; } .why-feature__content h3 { margin: 2px 0 8px; font-size: 20px; line-height: 1.35; font-weight: 750; color: #172554; } .why-feature__content p { margin: 0; font-size: 14px; line-height: 1.75; color: #64748b; } /* ========================================= CTA ========================================= */ .why-popodoo__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; padding: 18px 22px; border-radius: 16px; background: #172554; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 700; transition: transform 0.3s ease, background 0.3s ease; } .why-popodoo__cta:hover { transform: translateY(-3px); background: #4f46e5; } .why-popodoo__cta-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: #f97316; font-size: 20px; transition: transform 0.3s ease; } .why-popodoo__cta:hover .why-popodoo__cta-icon { transform: translateX(4px); } /* ========================================= TRUST BAR ========================================= */ .why-popodoo__trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 80px; padding-top: 32px; border-top: 1px solid #e2e8f0; } .why-popodoo__trust-item { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.5; color: #475569; } .why-popodoo__trust-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #ecfdf5; color: #059669; font-size: 11px; font-weight: 800; } /* ========================================= TABLET ========================================= */ @media (max-width: 1100px) { .why-popodoo__grid { gap: 50px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .why-popodoo__main-image { height: 560px; } .why-popodoo__visual { min-height: 620px; } .why-popodoo__small-image { height: 220px; } .why-popodoo__trust-bar { grid-template-columns: repeat(2, 1fr); } } /* ========================================= MOBILE ========================================= */ @media (max-width: 768px) { .why-popodoo { padding: 72px 16px; } .why-popodoo__heading { margin-bottom: 46px; } .why-popodoo__heading h2 { font-size: 38px; letter-spacing: -1.5px; } .why-popodoo__heading p { font-size: 15px; } .why-popodoo__grid { display: flex; flex-direction: column; gap: 48px; } .why-popodoo__visual { width: 100%; min-height: 520px; } .why-popodoo__main-image { width: 85%; height: 470px; border-radius: 24px; } .why-popodoo__small-image { width: 52%; height: 190px; right: 0; bottom: 0; border-width: 6px; border-radius: 20px; } .why-popodoo__floating-card { left: 18px; bottom: 18px; padding: 12px 14px; } .why-feature { grid-template-columns: 48px 1fr; gap: 14px; padding: 22px 0; } .why-feature__number { width: 42px; height: 42px; } .why-feature__content h3 { font-size: 18px; } .why-feature__content p { font-size: 14px; } .why-popodoo__trust-bar { grid-template-columns: 1fr; gap: 14px; margin-top: 50px; padding-top: 26px; } .why-popodoo__trust-item { padding: 12px 0; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .why-popodoo__heading h2 { font-size: 32px; } .why-popodoo__badge { font-size: 9px; } .why-popodoo__visual { min-height: 460px; } .why-popodoo__main-image { height: 420px; } .why-popodoo__small-image { width: 55%; height: 165px; } .why-popodoo__floating-card { left: 12px; bottom: 12px; padding: 10px 12px; } .why-popodoo__floating-icon { width: 32px; height: 32px; font-size: 15px; } .why-popodoo__floating-card strong { font-size: 13px; } .why-popodoo__floating-card span { font-size: 9px; } .why-popodoo__cta { padding: 15px 18px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-3ced19f *//* ========================================= SECTION 7 - REAL STUDENT CASE STUDIES ========================================= */ .student-cases { position: relative; padding: 120px 24px; overflow: hidden; background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% ); } /* Background decoration */ .student-cases::before { content: ""; position: absolute; width: 650px; height: 650px; top: 200px; left: -400px; border-radius: 50%; background: rgba(249, 115, 22, 0.05); pointer-events: none; } .student-cases__container { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; } /* ========================================= HEADING ========================================= */ .student-cases__heading { max-width: 850px; margin: 0 auto 72px; text-align: center; } .student-cases__badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; margin-bottom: 22px; border-radius: 999px; background: #fff7ed; color: #ea580c; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; } .student-cases__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #f97316; box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.12); } .student-cases__heading h2 { margin: 0 0 22px; font-size: clamp(40px, 5vw, 64px); line-height: 1.1; letter-spacing: -2px; font-weight: 800; color: #172554; } .student-cases__heading h2 span { color: #f97316; } .student-cases__heading p { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.8; color: #64748b; } /* ========================================= FEATURED CASE ========================================= */ .featured-case { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); overflow: hidden; margin-bottom: 100px; border-radius: 32px; background: #172554; box-shadow: 0 35px 90px rgba(15, 23, 42, 0.18); } /* ========================================= FEATURED IMAGE ========================================= */ .featured-case__image { position: relative; min-height: 650px; overflow: hidden; } .featured-case__image > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; } .featured-case__image-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 23, 42, 0.05) 30%, rgba(15, 23, 42, 0.7) 100% ); } /* IELTS SCORE */ .featured-case__band { position: absolute; top: 28px; left: 28px; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); } .featured-case__band-label { margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: #64748b; } .featured-case__band strong { font-size: 56px; line-height: 1; letter-spacing: -3px; color: #f97316; } .featured-case__band-text { margin-top: 5px; font-size: 11px; color: #64748b; } /* REAL STUDENT */ .featured-case__real { position: absolute; bottom: 28px; left: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(10px); color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: 1px; } .featured-case__real-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); } /* ========================================= FEATURED CONTENT ========================================= */ .featured-case__content { display: flex; flex-direction: column; padding: 60px; color: #ffffff; } .featured-case__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; } .featured-case__tag { padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fbbf24; font-size: 10px; font-weight: 800; letter-spacing: 1px; } .featured-case__step { font-size: 12px; color: rgba(255, 255, 255, 0.45); } .featured-case__content h3 { margin: 0 0 24px; font-size: clamp(30px, 3vw, 46px); line-height: 1.2; letter-spacing: -1.5px; font-weight: 750; color: #ffffff; } .featured-case__description { max-width: 580px; margin: 0 0 32px; font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, 0.68); } /* STUDENT INFO */ .featured-case__student { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; } .featured-case__student-avatar { width: 50px; height: 50px; overflow: hidden; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); } .featured-case__student-avatar img { width: 100%; height: 100%; object-fit: cover; } .featured-case__student strong { display: block; margin-bottom: 4px; font-size: 14px; } .featured-case__student span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.55); } /* ========================================= JOURNEY ========================================= */ .featured-case__journey { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .journey-item { flex: 1; } .journey-item__label { display: block; margin-bottom: 8px; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: rgba(255, 255, 255, 0.4); } .journey-item strong { display: block; font-size: 13px; line-height: 1.5; color: #ffffff; } .journey-item__arrow { color: #f97316; font-size: 20px; } /* ========================================= FEATURED BUTTON ========================================= */ .featured-case__button { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; padding: 17px 20px; border-radius: 14px; background: #f97316; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 800; transition: transform 0.3s ease, background 0.3s ease; } .featured-case__button:hover { transform: translateY(-3px); background: #ea580c; } .featured-case__button-arrow { font-size: 22px; } /* ========================================= SUB HEADING ========================================= */ .student-cases__subheading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 32px; } .student-cases__subheading > div span { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 800; letter-spacing: 1.3px; color: #f97316; } .student-cases__subheading h3 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; letter-spacing: -1px; color: #172554; } .student-cases__subheading > p { max-width: 400px; margin: 0; font-size: 14px; line-height: 1.7; color: #64748b; } /* ========================================= STUDENT GRID ========================================= */ .student-cases__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .student-case-card { overflow: hidden; border-radius: 22px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 15px 40px rgba(15, 23, 42, 0.05); transition: transform 0.35s ease, box-shadow 0.35s ease; } .student-case-card:hover { transform: translateY(-8px); box-shadow: 0 25px 55px rgba(15, 23, 42, 0.12); } /* CARD IMAGE */ .student-case-card__image { position: relative; height: 270px; overflow: hidden; background: #e2e8f0; } .student-case-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .student-case-card:hover .student-case-card__image img { transform: scale(1.06); } /* SCORE */ .student-case-card__score { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 25px rgba(15, 23, 42, 0.12); } .student-case-card__score span { font-size: 8px; font-weight: 800; letter-spacing: 1px; color: #64748b; } .student-case-card__score strong { font-size: 28px; line-height: 1.1; color: #f97316; } /* CARD CONTENT */ .student-case-card__content { padding: 22px; } .student-case-card__school { margin-bottom: 10px; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #4f46e5; } .student-case-card h4 { margin: 0 0 10px; font-size: 19px; color: #172554; } .student-case-card p { min-height: 70px; margin: 0 0 22px; font-size: 13px; line-height: 1.7; color: #64748b; } /* CARD FOOTER */ .student-case-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid #e2e8f0; } .student-case-card__footer > span:first-child { font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #94a3b8; } .student-case-card__icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #eef2ff; color: #4f46e5; transition: background 0.3s ease, color 0.3s ease; } .student-case-card:hover .student-case-card__icon { background: #4f46e5; color: #ffffff; } /* ========================================= RESULTS STRIP ========================================= */ .student-results { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 50px; margin-top: 80px; padding: 38px 42px; border-radius: 24px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.06); } .student-results__intro span { display: block; margin-bottom: 9px; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #f97316; } .student-results__intro h3 { margin: 0; font-size: 28px; line-height: 1.25; color: #172554; } .student-results__items { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .student-results__item { flex: 1; text-align: center; } .student-results__item strong { display: block; margin-bottom: 6px; font-size: 42px; letter-spacing: -2px; color: #172554; } .student-results__item span { display: block; font-size: 11px; line-height: 1.5; color: #64748b; } .student-results__item--highlight strong { color: #f97316; } .student-results__divider { width: 1px; height: 52px; background: #e2e8f0; } /* ========================================= FINAL CTA ========================================= */ .student-cases__cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 80px; padding: 48px 52px; border-radius: 30px; background: linear-gradient( 135deg, #4f46e5, #7c3aed ); color: #ffffff; } .student-cases__cta-content span { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: rgba(255, 255, 255, 0.65); } .student-cases__cta-content h3 { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -1px; color: #ffffff; } .student-cases__cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; flex-shrink: 0; padding: 18px 24px; border-radius: 14px; background: #ffffff; color: #4f46e5; text-decoration: none; font-size: 14px; font-weight: 800; transition: transform 0.3s ease, background 0.3s ease; } .student-cases__cta-button:hover { transform: translateY(-3px); background: #fbbf24; color: #172554; } .student-cases__cta-button span { font-size: 20px; } /* ========================================= TABLET ========================================= */ @media (max-width: 1100px) { .featured-case { grid-template-columns: 1fr; } .featured-case__image { min-height: 500px; } .student-cases__grid { grid-template-columns: repeat(2, 1fr); } .student-results { grid-template-columns: 1fr; gap: 32px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 768px) { .student-cases { padding: 72px 16px; } .student-cases__heading { margin-bottom: 46px; text-align: left; } .student-cases__heading h2 { font-size: 38px; letter-spacing: -1.5px; } .student-cases__heading p { margin: 0; font-size: 15px; } .featured-case { margin-bottom: 70px; border-radius: 24px; } .featured-case__image { min-height: 420px; } .featured-case__content { padding: 34px 24px; } .featured-case__top { margin-bottom: 26px; } .featured-case__content h3 { font-size: 30px; } .featured-case__journey { flex-direction: column; align-items: flex-start; gap: 14px; } .journey-item { width: 100%; } .journey-item__arrow { transform: rotate(90deg); } .student-cases__subheading { flex-direction: column; align-items: flex-start; gap: 16px; } .student-cases__grid { grid-template-columns: 1fr; gap: 16px; } .student-case-card { display: grid; grid-template-columns: 130px 1fr; } .student-case-card__image { height: 100%; min-height: 210px; } .student-case-card__content { padding: 20px; } .student-case-card p { min-height: auto; } .student-results { margin-top: 48px; padding: 30px 24px; border-radius: 20px; } .student-results__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .student-results__divider { display: none; } .student-results__item strong { font-size: 36px; } .student-cases__cta { flex-direction: column; align-items: flex-start; gap: 26px; margin-top: 50px; padding: 34px 26px; border-radius: 24px; } .student-cases__cta-button { width: 100%; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .student-cases__heading h2 { font-size: 32px; } .student-cases__badge { font-size: 9px; } .featured-case__image { min-height: 350px; } .featured-case__band { top: 18px; left: 18px; padding: 14px 16px; } .featured-case__band strong { font-size: 44px; } .featured-case__real { left: 18px; bottom: 18px; } .featured-case__content { padding: 30px 20px; } .featured-case__content h3 { font-size: 26px; } .student-case-card { grid-template-columns: 110px 1fr; } .student-case-card__content { padding: 16px; } .student-case-card h4 { font-size: 17px; } .student-case-card p { font-size: 12px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0365ec3 *//* ========================================= SECTION 8 - CONSULTATION BENEFITS ========================================= */ .consult-benefits { position: relative; padding: 120px 24px 0; overflow: hidden; background: #ffffff; } /* Background decoration */ .consult-benefits::before { content: ""; position: absolute; width: 700px; height: 700px; top: -350px; right: -350px; border-radius: 50%; background: rgba(79, 70, 229, 0.05); pointer-events: none; } .consult-benefits__container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 100px; align-items: center; max-width: 1280px; margin: 0 auto; padding-bottom: 120px; } /* ========================================= INTRO ========================================= */ .consult-benefits__intro { position: sticky; top: 100px; } .consult-benefits__badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; margin-bottom: 24px; border-radius: 999px; background: #ecfdf5; color: #059669; font-size: 11px; font-weight: 800; letter-spacing: 1px; } .consult-benefits__badge-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #059669; color: #ffffff; font-size: 10px; } .consult-benefits__intro h2 { margin: 0 0 24px; font-size: clamp(40px, 5vw, 62px); line-height: 1.08; letter-spacing: -2px; font-weight: 800; color: #172554; } .consult-benefits__intro h2 span { display: block; color: #f97316; } .consult-benefits__description { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.8; color: #64748b; } /* ========================================= TRUST NOTE ========================================= */ .consult-benefits__note { display: flex; align-items: flex-start; gap: 14px; margin-top: 34px; padding: 18px; border-radius: 18px; background: #f8fafc; border: 1px solid #e2e8f0; } .consult-benefits__note-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #dcfce7; color: #16a34a; font-size: 12px; font-weight: 800; } .consult-benefits__note p { margin: 2px 0 0; font-size: 13px; line-height: 1.7; color: #64748b; } .consult-benefits__note strong { color: #172554; } /* ========================================= BENEFITS LIST ========================================= */ .consult-benefits__list { display: flex; flex-direction: column; gap: 16px; } /* CARD */ .consult-benefit-card { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 20px; padding: 28px; overflow: hidden; border-radius: 22px; background: #ffffff; border: 1px solid #e2e8f0; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* Hover */ .consult-benefit-card:hover { transform: translateX(8px); border-color: rgba(79, 70, 229, 0.25); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08); } /* Number */ .consult-benefit-card__number { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: #eef2ff; color: #4f46e5; font-size: 12px; font-weight: 800; } /* Content */ .consult-benefit-card__content { display: flex; align-items: flex-start; gap: 18px; } .consult-benefit-card__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; background: #fff7ed; font-size: 23px; } .consult-benefit-card__content h3 { margin: 2px 0 8px; font-size: 19px; line-height: 1.35; color: #172554; } .consult-benefit-card__content p { margin: 0; font-size: 14px; line-height: 1.7; color: #64748b; } /* ========================================= BOTTOM CTA AREA ========================================= */ .consult-benefits__bottom { position: relative; z-index: 3; padding: 0 24px 100px; } .consult-benefits__bottom-container { display: flex; align-items: center; justify-content: space-between; gap: 50px; max-width: 1280px; margin: 0 auto; padding: 48px 54px; border-radius: 30px; background: #172554; color: #ffffff; box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18); } /* Bottom text */ .consult-benefits__bottom-text span { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: #fbbf24; } .consult-benefits__bottom-text h3 { margin: 0 0 10px; font-size: clamp(26px, 3vw, 38px); line-height: 1.2; letter-spacing: -1px; color: #ffffff; } .consult-benefits__bottom-text p { max-width: 600px; margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.62); } /* CTA BUTTON */ .consult-benefits__button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; flex-shrink: 0; padding: 18px 24px; border-radius: 15px; background: #f97316; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 800; transition: transform 0.3s ease, background 0.3s ease; } .consult-benefits__button:hover { transform: translateY(-4px); background: #ea580c; } .consult-benefits__button-arrow { font-size: 22px; transition: transform 0.3s ease; } .consult-benefits__button:hover .consult-benefits__button-arrow { transform: translateX(4px); } /* ========================================= TABLET ========================================= */ @media (max-width: 1024px) { .consult-benefits__container { grid-template-columns: 1fr; gap: 60px; } .consult-benefits__intro { position: relative; top: auto; max-width: 700px; } .consult-benefits__bottom-container { align-items: flex-start; flex-direction: column; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 768px) { .consult-benefits { padding: 72px 16px 0; } .consult-benefits__container { gap: 42px; padding-bottom: 70px; } .consult-benefits__intro h2 { font-size: 38px; letter-spacing: -1.5px; } .consult-benefits__description { font-size: 15px; } .consult-benefit-card { grid-template-columns: 46px 1fr; gap: 14px; padding: 22px 18px; } .consult-benefit-card:hover { transform: translateY(-3px); } .consult-benefit-card__content { gap: 12px; } .consult-benefit-card__icon { width: 46px; height: 46px; border-radius: 14px; font-size: 20px; } .consult-benefit-card__content h3 { margin-top: 0; font-size: 17px; } .consult-benefit-card__content p { font-size: 13px; } .consult-benefits__bottom { padding: 0 16px 72px; } .consult-benefits__bottom-container { gap: 26px; padding: 34px 26px; border-radius: 24px; } .consult-benefits__button { width: 100%; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .consult-benefits__intro h2 { font-size: 32px; } .consult-benefits__badge { font-size: 9px; } .consult-benefit-card { grid-template-columns: 1fr; gap: 14px; } .consult-benefit-card__number { width: 40px; height: 40px; } .consult-benefit-card__content { gap: 12px; } .consult-benefits__note { padding: 16px; } .consult-benefits__bottom-container { padding: 30px 22px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-778a2e5 *//* ========================================= SECTION 9 - MAIN LEAD FORM ========================================= */ .lead-form-section { position: relative; padding: 120px 24px; overflow: hidden; background: linear-gradient( 135deg, #0f172a 0%, #172554 45%, #1e1b4b 100% ); } /* ========================================= BACKGROUND GLOW ========================================= */ .lead-form-section__glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; filter: blur(10px); } .lead-form-section__glow--1 { top: -350px; left: -250px; background: rgba(249, 115, 22, 0.15); } .lead-form-section__glow--2 { right: -300px; bottom: -400px; background: rgba(79, 70, 229, 0.3); } /* ========================================= CONTAINER ========================================= */ .lead-form-section__container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.85fr); gap: 100px; align-items: center; max-width: 1280px; margin: 0 auto; } /* ========================================= LEFT CONTENT ========================================= */ .lead-form-section__content { color: #ffffff; } .lead-form-section__badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 10px; font-weight: 800; letter-spacing: 1.1px; color: #fbbf24; } .lead-form-section__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.15); } /* Heading */ .lead-form-section__content h2 { max-width: 720px; margin: 0 0 24px; font-size: clamp(44px, 5vw, 68px); line-height: 1.05; letter-spacing: -2.5px; font-weight: 800; color: #ffffff; } .lead-form-section__content h2 span { display: block; color: #f97316; } /* Description */ .lead-form-section__description { max-width: 650px; margin: 0; font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, 0.65); } /* ========================================= BENEFITS ========================================= */ .lead-form-section__benefits { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; } .lead-benefit { display: flex; align-items: center; gap: 15px; } .lead-benefit__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(34, 197, 94, 0.14); border: 1px solid rgba(34, 197, 94, 0.25); color: #4ade80; font-size: 13px; font-weight: 800; } .lead-benefit strong { display: block; margin-bottom: 4px; font-size: 15px; color: #ffffff; } .lead-benefit span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.5); } /* ========================================= TRUST STATS ========================================= */ .lead-form-section__trust { display: flex; align-items: center; gap: 28px; margin-top: 55px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .lead-trust-item strong { display: block; margin-bottom: 5px; font-size: 22px; letter-spacing: -0.5px; color: #ffffff; } .lead-trust-item span { display: block; font-size: 10px; line-height: 1.5; color: rgba(255, 255, 255, 0.45); } .lead-trust-divider { width: 1px; height: 42px; background: rgba(255, 255, 255, 0.12); } /* ========================================= FORM CARD ========================================= */ .lead-form-card { position: relative; padding: 42px; border-radius: 30px; background: #ffffff; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.25); } /* Header */ .lead-form-card__header { margin-bottom: 28px; } .lead-form-card__eyebrow { display: block; margin-bottom: 9px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: #f97316; } .lead-form-card__header h3 { margin: 0 0 9px; font-size: 30px; line-height: 1.2; letter-spacing: -0.8px; color: #172554; } .lead-form-card__header p { margin: 0; font-size: 13px; line-height: 1.7; color: #64748b; } /* ========================================= FORM ========================================= */ .lead-form { display: flex; flex-direction: column; gap: 17px; } .lead-form__group { display: flex; flex-direction: column; gap: 8px; } .lead-form__group label { font-size: 12px; font-weight: 700; color: #334155; } .lead-form__group label span { color: #ef4444; } /* ========================================= INPUT ========================================= */ .lead-form__input-wrap { position: relative; } .lead-form__input-icon { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); font-size: 16px; pointer-events: none; } .lead-form__input-wrap input, .lead-form__select-wrap select { width: 100%; height: 54px; padding: 0 16px 0 45px; border-radius: 12px; outline: none; border: 1px solid #e2e8f0; background: #f8fafc; color: #172554; font-family: inherit; font-size: 14px; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .lead-form__select-wrap { position: relative; } .lead-form__select-wrap::after { content: "⌄"; position: absolute; top: 50%; right: 16px; transform: translateY(-55%); pointer-events: none; color: #64748b; font-size: 18px; } .lead-form__select-wrap select { appearance: none; padding-left: 16px; cursor: pointer; } .lead-form__input-wrap input:focus, .lead-form__select-wrap select:focus { border-color: #f97316; background: #ffffff; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1); } /* ========================================= CONSENT ========================================= */ .lead-form__consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 3px; cursor: pointer; } .lead-form__consent input { position: absolute; opacity: 0; pointer-events: none; } .lead-form__checkbox { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 1.5px solid #cbd5e1; background: #ffffff; transition: background 0.2s ease, border-color 0.2s ease; } .lead-form__consent input:checked + .lead-form__checkbox { background: #f97316; border-color: #f97316; } .lead-form__consent input:checked + .lead-form__checkbox::after { content: "✓"; color: #ffffff; font-size: 11px; font-weight: 800; } .lead-form__consent-text { font-size: 11px; line-height: 1.65; color: #64748b; } /* ========================================= SUBMIT BUTTON ========================================= */ .lead-form__submit { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 4px; padding: 17px 20px; border: none; border-radius: 14px; background: linear-gradient( 135deg, #f97316, #ea580c ); color: #ffffff; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 800; transition: transform 0.25s ease, box-shadow 0.25s ease; } .lead-form__submit:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(234, 88, 12, 0.25); } .lead-form__submit-arrow { font-size: 22px; transition: transform 0.25s ease; } .lead-form__submit:hover .lead-form__submit-arrow { transform: translateX(5px); } /* Loading state */ .lead-form__submit.is-loading { pointer-events: none; opacity: 0.75; } .lead-form__submit.is-loading .lead-form__submit-arrow { animation: leadArrowPulse 0.8s infinite alternate; } @keyframes leadArrowPulse { from { transform: translateX(0); } to { transform: translateX(6px); } } /* ========================================= SECURITY TEXT ========================================= */ .lead-form__security { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; color: #94a3b8; } /* ========================================= SUCCESS MESSAGE ========================================= */ .lead-form__success { display: none; align-items: flex-start; gap: 12px; margin-top: 8px; padding: 16px; border-radius: 14px; background: #ecfdf5; border: 1px solid #bbf7d0; } .lead-form__success.show { display: flex; } .lead-form__success-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #22c55e; color: #ffffff; font-size: 13px; font-weight: 800; } .lead-form__success strong { display: block; margin-bottom: 3px; font-size: 13px; color: #166534; } .lead-form__success p { margin: 0; font-size: 11px; line-height: 1.6; color: #15803d; } /* ========================================= ERROR MESSAGE ========================================= */ .lead-form__error { display: none; padding: 12px 14px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 12px; } .lead-form__error.show { display: block; } /* ========================================= TABLET ========================================= */ @media (max-width: 1100px) { .lead-form-section__container { grid-template-columns: 1fr; gap: 60px; max-width: 720px; } .lead-form-section__content { text-align: center; } .lead-form-section__description { margin-left: auto; margin-right: auto; } .lead-form-section__benefits { max-width: 480px; margin-left: auto; margin-right: auto; text-align: left; } .lead-form-section__trust { justify-content: center; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 768px) { .lead-form-section { padding: 80px 16px; } .lead-form-section__container { gap: 46px; } .lead-form-section__content { text-align: left; } .lead-form-section__content h2 { font-size: 42px; letter-spacing: -1.8px; } .lead-form-section__description { margin-left: 0; margin-right: 0; font-size: 15px; } .lead-form-section__trust { justify-content: flex-start; gap: 16px; margin-top: 40px; } .lead-trust-item strong { font-size: 17px; } .lead-trust-item span { font-size: 9px; } .lead-trust-divider { height: 36px; } .lead-form-card { padding: 30px 22px; border-radius: 24px; } .lead-form-card__header h3 { font-size: 26px; } .lead-form { gap: 15px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .lead-form-section__content h2 { font-size: 35px; } .lead-form-section__badge { font-size: 9px; } .lead-form-section__trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .lead-trust-divider { display: none; } .lead-trust-item strong { font-size: 15px; } .lead-trust-item span { font-size: 8px; } .lead-benefit { align-items: flex-start; } .lead-benefit strong { font-size: 14px; } .lead-form-card { padding: 28px 18px; } .lead-form__input-wrap input, .lead-form__select-wrap select { height: 52px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-6b3befa *//* ========================================= SECTION 10 - FAQ + TRUST ========================================= */ .faq-trust-section { position: relative; padding: 120px 24px; overflow: hidden; background: #f8fafc; } /* ========================================= CONTAINER ========================================= */ .faq-trust-section__container { max-width: 1280px; margin: 0 auto; } /* ========================================= HEADER ========================================= */ .faq-trust-section__header { max-width: 720px; margin: 0 auto 70px; text-align: center; } .faq-trust-section__eyebrow { display: inline-flex; align-items: center; padding: 9px 15px; margin-bottom: 20px; border-radius: 999px; background: #fff7ed; color: #f97316; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; } .faq-trust-section__header h2 { margin: 0 0 20px; font-size: clamp(38px, 5vw, 62px); line-height: 1.08; letter-spacing: -2px; color: #172554; } .faq-trust-section__header h2 span { display: block; color: #f97316; } .faq-trust-section__header p { max-width: 600px; margin: 0 auto; font-size: 16px; line-height: 1.8; color: #64748b; } /* ========================================= MAIN GRID ========================================= */ .faq-trust-section__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr); gap: 70px; align-items: start; } /* ========================================= FAQ ========================================= */ .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { overflow: hidden; border-radius: 18px; background: #ffffff; border: 1px solid #e2e8f0; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .faq-item.active { border-color: rgba(249, 115, 22, 0.4); box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06); } /* Question */ .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 25px; width: 100%; padding: 23px 24px; border: none; background: transparent; text-align: left; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.5; color: #172554; } /* Icon */ .faq-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 23px; font-weight: 400; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; } .faq-item.active .faq-icon { transform: rotate(45deg); background: #f97316; color: #ffffff; } /* Answer */ .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; } .faq-item.active .faq-answer { grid-template-rows: 1fr; } .faq-answer__content { overflow: hidden; padding: 0 24px; color: #64748b; font-size: 14px; line-height: 1.8; transition: padding 0.35s ease; } .faq-item.active .faq-answer__content { padding: 0 24px 25px; } /* ========================================= TRUST REVIEW CARD ========================================= */ .trust-review-card { position: sticky; top: 100px; padding: 34px; border-radius: 26px; background: #172554; color: #ffffff; box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18); } /* Verified */ .trust-review-card__verified { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 25px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #fbbf24; } .verified-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; color: #ffffff; font-size: 9px; } /* Rating */ .trust-review-card__rating { display: flex; align-items: center; gap: 18px; } .rating-number { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -2px; color: #ffffff; } .rating-stars { margin-bottom: 5px; color: #fbbf24; font-size: 15px; letter-spacing: 2px; } .rating-content p { margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.5); } /* Address */ .trust-review-card__place { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; } .trust-review-card__place-icon { font-size: 15px; } .trust-review-card__place p { margin: 0; font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, 0.65); } /* Divider */ .trust-review-card__divider { width: 100%; height: 1px; margin: 30px 0; background: rgba(255, 255, 255, 0.1); } /* Quote */ .trust-review-card__quote { position: relative; padding-left: 18px; } .trust-review-card__quote-mark { position: absolute; top: -22px; left: -3px; font-size: 58px; line-height: 1; color: rgba(249, 115, 22, 0.6); } .trust-review-card__quote p { position: relative; z-index: 2; margin: 0; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.8); } /* ========================================= TRUST POINTS ========================================= */ .trust-review-card__points { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; } .trust-point { display: flex; align-items: flex-start; gap: 11px; } .trust-point__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: rgba(34, 197, 94, 0.15); color: #4ade80; font-size: 10px; font-weight: 800; } .trust-point span { font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); } /* ========================================= CARD FOOTER ========================================= */ .trust-review-card__footer { display: flex; flex-direction: column; gap: 9px; margin-top: 32px; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .trust-review-card__footer span { font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #f97316; } .trust-review-card__footer strong { font-size: 18px; line-height: 1.5; color: #ffffff; } /* ========================================= FINAL CTA ========================================= */ .faq-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 50px; margin-top: 90px; padding: 55px 60px; border-radius: 30px; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06); } .faq-final-cta__content { max-width: 750px; } .faq-final-cta__content > span { display: block; margin-bottom: 12px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: #f97316; } .faq-final-cta__content h3 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 38px); line-height: 1.25; letter-spacing: -1px; color: #172554; } .faq-final-cta__content p { margin: 0; font-size: 14px; line-height: 1.7; color: #64748b; } /* CTA BUTTON */ .faq-final-cta__button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; flex-shrink: 0; padding: 19px 25px; border-radius: 14px; background: #f97316; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 800; transition: transform 0.25s ease, box-shadow 0.25s ease; } .faq-final-cta__button:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(249, 115, 22, 0.25); } .faq-final-cta__arrow { font-size: 22px; transition: transform 0.25s ease; } .faq-final-cta__button:hover .faq-final-cta__arrow { transform: translateX(5px); } /* ========================================= TABLET ========================================= */ @media (max-width: 1024px) { .faq-trust-section__grid { grid-template-columns: 1fr; gap: 50px; } .trust-review-card { position: relative; top: auto; } .faq-final-cta { align-items: flex-start; flex-direction: column; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 768px) { .faq-trust-section { padding: 80px 16px; } .faq-trust-section__header { margin-bottom: 45px; text-align: left; } .faq-trust-section__header p { margin-left: 0; } .faq-question { padding: 20px 18px; gap: 16px; font-size: 14px; } .faq-answer__content { padding-left: 18px; padding-right: 18px; font-size: 13px; } .faq-item.active .faq-answer__content { padding: 0 18px 22px; } .faq-icon { width: 30px; height: 30px; font-size: 20px; } .trust-review-card { padding: 28px 22px; border-radius: 22px; } .faq-final-cta { gap: 30px; margin-top: 60px; padding: 35px 25px; border-radius: 24px; } .faq-final-cta__button { width: 100%; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .faq-trust-section__header h2 { font-size: 34px; letter-spacing: -1.4px; } .rating-number { font-size: 48px; } .trust-review-card__quote p { font-size: 13px; } .trust-point span { font-size: 11px; } .faq-final-cta { padding: 30px 20px; } .faq-final-cta__content h3 { font-size: 25px; } } /* ========================================= SECTION 10 - MOBILE OVERFLOW FIX ĐẶT ĐOẠN NÀY Ở CUỐI FILE CSS ========================================= */ @media (max-width: 768px) { /* Prevent horizontal overflow */ .faq-trust-section, .faq-trust-section * { box-sizing: border-box; } .faq-trust-section { width: 100%; max-width: 100%; overflow-x: hidden; padding: 70px 16px; } .faq-trust-section__container { width: 100%; max-width: 100%; min-width: 0; } /* ========================================= HEADER ========================================= */ .faq-trust-section__header { width: 100%; max-width: 100%; margin-bottom: 40px; } .faq-trust-section__header h2 { width: 100%; max-width: 100%; font-size: 34px; line-height: 1.15; letter-spacing: -1px; word-break: normal; overflow-wrap: break-word; } .faq-trust-section__header p { width: 100%; max-width: 100%; font-size: 14px; line-height: 1.7; } /* ========================================= MAIN GRID ========================================= */ .faq-trust-section__grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; min-width: 0; gap: 35px; } .faq-list { width: 100%; max-width: 100%; min-width: 0; } /* ========================================= FAQ ITEM ========================================= */ .faq-item { width: 100%; max-width: 100%; min-width: 0; border-radius: 16px; } .faq-question { width: 100%; max-width: 100%; min-width: 0; padding: 18px 16px; gap: 12px; font-size: 14px; line-height: 1.5; } .faq-question > span:first-child { flex: 1; min-width: 0; overflow-wrap: break-word; } .faq-icon { flex: 0 0 30px; width: 30px; height: 30px; font-size: 19px; } .faq-answer { width: 100%; max-width: 100%; } .faq-answer__content { width: 100%; padding-left: 16px; padding-right: 16px; font-size: 13px; overflow-wrap: break-word; } .faq-item.active .faq-answer__content { padding: 0 16px 20px; } /* ========================================= TRUST CARD ========================================= */ .trust-review-card { position: relative; top: auto; width: 100%; max-width: 100%; min-width: 0; padding: 26px 20px; border-radius: 20px; } .trust-review-card__rating { width: 100%; gap: 14px; } .rating-number { flex-shrink: 0; font-size: 48px; } .rating-content { min-width: 0; } .rating-stars { white-space: nowrap; font-size: 13px; letter-spacing: 1px; } .trust-review-card__place { width: 100%; min-width: 0; } .trust-review-card__place p { min-width: 0; overflow-wrap: break-word; } .trust-review-card__quote { width: 100%; min-width: 0; padding-left: 14px; } .trust-review-card__quote p { width: 100%; font-size: 13px; overflow-wrap: break-word; } .trust-review-card__points { width: 100%; min-width: 0; } .trust-point { width: 100%; min-width: 0; } .trust-point span { min-width: 0; font-size: 12px; overflow-wrap: break-word; } /* ========================================= FINAL CTA ========================================= */ .faq-final-cta { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; gap: 25px; margin-top: 55px; padding: 30px 20px; border-radius: 20px; } .faq-final-cta__content { width: 100%; max-width: 100%; min-width: 0; } .faq-final-cta__content h3 { font-size: 25px; line-height: 1.25; letter-spacing: -0.7px; overflow-wrap: break-word; } .faq-final-cta__content p { font-size: 13px; } .faq-final-cta__button { display: flex; width: 100%; max-width: 100%; min-width: 0; padding: 17px 18px; } } @media (max-width: 767px) { .faq-question > span:first-child { white-space: normal !important; overflow-wrap: break-word; word-break: break-word; flex: 1; min-width: 0; } }/* End custom CSS */