/* Google Fonts loaded in for performance — do not @import here */ :root { --inter: "Inter", sans-serif; --primary-color: #6db82b; --secondary-color: #262f2e; --sub-bg: #f5f5f5; --heading-color: #1a2420; --paragraph: #7c7a7a; --span: #888888; --border: #d9d9d9; --white: #ffffff; --black: #000000; --border-1px: 1px solid #d9d9d9; --border-2px: 2px solid #d9d9d9; --transition: all 0.4s ease-in-out; --shadow: 0px 4px 55px 0px #6db82b26; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; } body { margin: 0; padding: 0; font-family: var(--inter); color: var(--paragraph); background-color: var(--white); line-height: 28px; font-weight: 400; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; color: var(--heading-color); font-family: var(--inter); } h1 { font-size: 60px; font-weight: 600; line-height: 1.33em; } h2 { font-size: 50px; font-weight: 600; line-height: 1.3em; } h3 { font-size: 24px; font-weight: 600; line-height: 1.3em; } h4 { font-size: 18px; font-weight: 600; } h5 { font-size: 16px; font-weight: 600; line-height: 19px; } h6 { font-size: 14px; font-weight: 600; } p { margin: 0; padding: 0; line-height: 28px; font-size: 16px; } span { display: inline-block; } a { text-decoration: none; display: inline-block; color: var(--heading-color); transition: var(--transition); } a:hover { color: var(--heading-color); } ul { margin: 0; padding: 0; text-decoration: none; } li { list-style: none; } button { border: none; background-color: transparent; } input { border: none; outline: none; } ::placeholder { color: var(--span); } ::selection { color: var(--white); background-color: var(--primary-color); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-color: var(--border); } ::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 8px; border: 1px solid transparent; background-clip: content-box; } .mt-5 { margin-top: 5px; } .mt-130 { margin-top: 130px; } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-130 { margin-bottom: 130px; } .ml-20 { margin-left: 20px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-80 { padding-top: 80px; } .pt-100 { padding-top: 100px; } .pt-5 { padding-top: 130px; } .pb-65 { padding-bottom: 65px; } .pb-80 { padding-bottom: 80px; } .pb-100 { padding-bottom: 100px; } .pb-5 { padding-bottom: 130px; } .bor { border: 1px solid var(--border); } .bor-left { border-left: 1px solid var(--border); } .bor-bottom { border-bottom: 1px solid var(--border); } .image img { width: 100%; } .primary-color { color: var(--primary-color) !important; } .secondary-bg { background-color: var(--secondary-color); } .sub-bg { background-color: var(--sub-bg); } .bg-image { background-position: center; background-repeat: no-repeat; background-size: cover; } .overlay, .subscribe-area, .involve__bg, .donation, .achievement, .service-single__right-item .item-two, .banner-four { position: relative; } .overlay::before, .subscribe-area::before, .involve__bg::before, .donation::before, .achievement::before, .service-single__right-item .item-two::before, .banner-four::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .btn-one, .btn-two, .btn-two-light, .btn-one-white, .btn-one-light { padding: 9px 20px; font-weight: 600; color: var(--primary-color); transition: var(--transition); border: 2px solid var(--primary-color); border-radius: 32px; position: relative; text-transform: capitalize; overflow: hidden; } .btn-one i, .btn-two i, .btn-two-light i, .btn-one-white i, .btn-one-light i { padding: 0 5px; position: relative; } .btn-one span, .btn-two span, .btn-two-light span, .btn-one-white span, .btn-one-light span { color: var(--primary-color); position: relative; transition: var(--transition); } .btn-one::before, .btn-two::before, .btn-two-light::before, .btn-one-white::before, .btn-one-light::before { position: absolute; content: ""; width: 0%; height: 100%; top: 0px; right: 0px; bottom: 0px; background-color: var(--primary-color); transition: var(--transition); } .btn-one:hover, .btn-two:hover, .btn-two-light:hover, .btn-one-white:hover, .btn-one-light:hover { color: var(--white); } .btn-one:hover span, .btn-two:hover span, .btn-two-light:hover span, .btn-one-white:hover span, .btn-one-light:hover span { color: var(--white); } .btn-one:hover::before, .btn-two:hover::before, .btn-two-light:hover::before, .btn-one-white:hover::before, .btn-one-light:hover::before { width: 100%; left: 0px; } .scroll-up { cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px var(--border); z-index: 99; opacity: 0; visibility: hidden; transform: translateY(15px); position: fixed; right: 40px; bottom: 100px; height: 50px; width: 50px; transition: var(--transition); } .scroll-up::after { position: absolute; font-family: "Font Awesome 6 Pro"; content: "\f30c"; text-align: center; line-height: 50px; font-weight: 700; font-size: 18px; color: var(--primary-color); left: 0; top: 0; height: 50px; width: 50px; cursor: pointer; display: block; z-index: 1; transition: var(--transition); } .scroll-up svg path { fill: none; } .scroll-up svg.scroll-circle path { stroke: var(--primary-color); stroke-width: 4px; box-sizing: border-box; transition: var(--transition); } .scroll-up.active-scroll { opacity: 1; visibility: visible; transform: translateY(0); } .header-section { position: absolute; top: 0; left: 0; width: 100%; z-index: 99; background: transparent; transition: background 0.4s ease, box-shadow 0.4s ease; } .header-section:not(.menu-fixed) .main-menu>li>a { color: var(--heading-color); } .header-section:not(.menu-fixed) .main-menu>li>a:hover, .header-section:not(.menu-fixed) .main-menu>li>a.active { color: var(--primary-color); } .header-section:not(.menu-fixed) .header-bar span { background: var(--heading-color) !important; } /* Scrolled / sticky state */ .menu-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; transition: background 0.4s ease, box-shadow 0.4s ease; background: var(--white); box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.1); } .menu-fixed .main-menu li a { color: var(--heading-color); } .menu-fixed .main-menu li a:hover, .menu-fixed .main-menu li a.active { color: var(--primary-color); } .menu-fixed .header-bar span { background: var(--primary-color) !important; } .header-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; transition: var(--transition); position: relative; } .header-wrapper .logo-menu { max-width: 184px; } .header-wrapper .logo-menu img { max-width: 100%; } .header-wrapper .main-menu { position: relative; display: flex; align-items: center; } .header-wrapper .main-menu li { transition: var(--transition); position: relative; } .header-wrapper .main-menu li:not(:last-child) { margin-right: 30px; } .header-wrapper .main-menu li a { font-size: 16px; font-weight: 600; transition: var(--transition); text-transform: capitalize; padding: 35px 0; } .header-wrapper .main-menu li a i { margin-left: 2px; font-size: 12px; } .header-wrapper .main-menu li .sub-menu { display: none; transform: translateY(20px); } @media (min-width: 1200px) { .header-wrapper .main-menu li .sub-menu { position: absolute; top: 99%; left: 0; z-index: 9; width: 250px; transition: var(--transition); background: var(--white); box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05); display: block; opacity: 0; visibility: hidden; } } .header-wrapper .main-menu li .sub-menu li { margin-right: 0; transition: var(--transition); } .header-wrapper .main-menu li .sub-menu li a { color: var(--heading-color); text-transform: capitalize; font-weight: 400; font-size: 16px; display: block; padding: 8px 25px; transition: var(--transition); } .header-wrapper .main-menu li .sub-menu li a:hover { color: var(--primary-color); } .header-wrapper .main-menu li .sub-menu li:not(:last-child) { border-bottom: 1px solid var(--border); } .header-wrapper .main-menu li .sub-menu li :hover { margin-left: 10px; } .header-wrapper .main-menu li:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(-25px); } .header-wrapper .main-menu .menu-btn a { margin-left: 45px; padding: 15px 30px; background-color: var(--primary-color); border: 2px solid var(--primary-color); color: var(--white); border-radius: 6px; transition: var(--transition); } .header-wrapper .main-menu .menu-btn a i { font-size: 16px; } .header-wrapper .main-menu .menu-btn a span { color: var(--white); transition: var(--transition); } .header-wrapper .main-menu .menu-btn a:hover { background-color: var(--white); } .header-wrapper .main-menu .menu-btn a:hover span { color: var(--primary-color); } .mega-menu-area { position: absolute; left: 0; top: 98px; z-index: 99; width: 100%; opacity: 0; visibility: hidden; transform: translateY(20px); transition: var(--transition); } .mega-menu-hover { opacity: 1; visibility: visible; transform: translateX(0px); } .side_bar_hidden { visibility: hidden; opacity: 0; right: -30px; } #loading { background-color: var(--white); height: 100%; width: 100%; position: fixed; z-index: 9999999; margin-top: 0px; top: 0px; } #loading #loading-center { width: 100%; height: 100%; position: relative; } #loading #loading-center-absolute { position: absolute; left: 50%; top: 50%; width: 25%; transform: translate(-50%, -50%); } #loading .loading-icon .loading-logo { width: 150px; height: 150px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { #loading #loading-center-absolute { width: 40%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { #loading #loading-center-absolute { width: 40%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { #loading #loading-center-absolute { width: 45%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { #loading #loading-center-absolute { width: 50%; } } @media (max-width: 575px) { #loading #loading-center-absolute { width: 60%; } } .section-header { margin-bottom: 65px; } .section-header h5 { color: var(--primary-color); padding-bottom: 20px; text-transform: uppercase; } .section-header h5 img { margin-right: 5px; } .section-header h2 { text-transform: capitalize; } .section-header p { margin-top: 30px; } .about-two { overflow: hidden; position: relative; } .about-two__image { max-width: 600px; position: relative; } .about-two__image img { width: 100%; clip-path: polygon(100% 86.207%, 100% 86.207%, 99.926% 86.953%, 99.711% 87.66%, 99.367% 88.32%, 98.905% 88.922%, 98.338% 89.458%, 97.677% 89.917%, 96.934% 90.291%, 96.12% 90.57%, 95.247% 90.744%, 94.326% 90.805%, 77.872% 90.805%, 77.872% 90.805%, 76.952% 90.865%, 76.079% 91.039%, 75.265% 91.318%, 74.522% 91.692%, 73.86% 92.151%, 73.293% 92.687%, 72.832% 93.289%, 72.488% 93.949%, 72.273% 94.657%, 72.199% 95.402%, 72.199% 95.402%, 72.124% 96.148%, 71.909% 96.856%, 71.565% 97.515%, 71.104% 98.118%, 70.537% 98.653%, 69.876% 99.113%, 69.132% 99.487%, 68.318% 99.766%, 67.445% 99.94%, 66.525% 100%, 5.674% 100%, 5.674% 100%, 4.753% 99.94%, 3.88% 99.766%, 3.066% 99.487%, 2.323% 99.113%, 1.662% 98.653%, 1.095% 98.118%, 0.633% 97.515%, 0.289% 96.856%, 0.074% 96.148%, 0% 95.402%, 0% 13.793%, 0% 13.793%, 0.074% 13.047%, 0.289% 12.34%, 0.633% 11.68%, 1.095% 11.078%, 1.662% 10.542%, 2.323% 10.082%, 3.066% 9.709%, 3.88% 9.43%, 4.753% 9.256%, 5.674% 9.195%, 36.738% 9.195%, 36.738% 9.195%, 37.658% 9.135%, 38.531% 8.961%, 39.345% 8.682%, 40.088% 8.308%, 40.75% 7.849%, 41.317% 7.313%, 41.778% 6.711%, 42.122% 6.051%, 42.337% 5.343%, 42.411% 4.598%, 42.411% 4.598%, 42.486% 3.852%, 42.701% 3.144%, 43.045% 2.485%, 43.506% 1.882%, 44.073% 1.347%, 44.734% 0.887%, 45.478% 0.513%, 46.292% 0.234%, 47.165% 0.06%, 48.085% 0%, 94.326% 0%, 94.326% 0%, 95.247% 0.06%, 96.12% 0.234%, 96.934% 0.513%, 97.677% 0.887%, 98.338% 1.347%, 98.905% 1.882%, 99.367% 2.485%, 99.711% 3.144%, 99.926% 3.852%, 100% 4.598%, 100% 86.207%); } .about-two__image .sm-image { max-width: 260px; position: absolute; top: 70px; right: -105px; z-index: 1; } .about-two__image .info { position: absolute; bottom: -61px; left: 19px; padding: 25px 40px; background-color: rgba(0, 0, 0, 0.55); border: 10px solid var(--white); background-blend-mode: overlay; } .about-two__image .info h2 { color: var(--white); } .about-two__image .info h2 span { color: var(--white); } .about-two__image .info .year { font-size: 20px; font-weight: 300; color: var(--white); } .about-two__image .stroke-text { position: absolute; right: -35%; bottom: 15%; } .about-two__image .stroke-text h2 { transform: rotate(-90deg); color: #6762621f; text-transform: uppercase; letter-spacing: 5px; } .about-two__right-item ul li { color: var(--heading-color); font-weight: 600; } .about-two__right-item .about_info .info i { width: 50px; height: 50px; color: var(--primary-color); font-size: 18px; line-height: 48px; text-align: center; border-radius: 50%; border: 2px solid var(--primary-color); margin-right: 10px; } .about-two__right-item .about_info .bor-left { height: 60px; } .about-two__shape-left { position: absolute; left: 0; top: 30%; z-index: -1; } .about-two__shape-right { position: absolute; right: 40px; bottom: 130px; z-index: -1; } .work { overflow: hidden; } .traction-band { background: #f8faf5; padding-top: 80px; } .work__item, .work-five__item { overflow: hidden; position: relative; padding: 30px; border: var(--border-1px); transition: var(--transition); } .work__item-icon { display: flex; align-items: center; justify-content: space-between; } .work__item-icon span { font-weight: 700; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--border); font-size: 60px; line-height: 80px; color: transparent; transition: var(--transition); } .work__item-leaf { position: absolute; right: 0; bottom: 0; z-index: 1; transition: var(--transition); opacity: 0; visibility: hidden; transform: translateY(10px); } .work__item h3 a:hover, .work-five__item h3 a:hover { color: var(--primary-color); } .work__item p, .work-five__item p { margin: 20px 0; } .work__item-arrow { font-size: 20px; position: relative; transform: translateX(0); transition: 0.7s; } .work__item-arrow::before { position: absolute; content: "Know More"; font-weight: 600; color: var(--primary-color); font-size: 16px; left: -95px; top: -2px; transition: var(--transition); opacity: 0; } .work__item:hover, .work-five__item:hover { border: 1px solid transparent; box-shadow: var(--shadow); } .work__item:hover .work__item-icon span, .work-five__item:hover .work__item-icon span { color: var(--border); } .work__item:hover .work__item-leaf, .work-five__item:hover .work__item-leaf { opacity: 1; visibility: visible; transform: translateY(0px); } .work__item:hover .work__item-arrow, .work-five__item:hover .work__item-arrow { transform: translateX(95px); color: var(--primary-color); } .work__item:hover .work__item-arrow::before, .work-five__item:hover .work__item-arrow::before { opacity: 1; } .service-single__left-item ul { display: flex; flex-wrap: wrap; align-items: center; } .service-single__left-item ul li:not(:last-child) { margin-right: 25px; } .service-single__left-item ul li span { width: 6px; height: 6px; background-color: var(--primary-color); border-radius: 50%; margin-right: 5px; } .page-service__right-item ul li i { animation: rotate 3s infinite linear; } @keyframes marqueeRight { 0% { left: -100%; } 100% { left: 0; } } @keyframes marqueeLeft { 0% { left: 0; } 100% { left: -100%; } } .accordion .accordion-item { border-radius: 0; margin-bottom: 30px; border: 1px solid transparent; } .accordion .accordion-item h2 button { font-size: 24px; font-weight: 500; box-shadow: none; border-radius: 0 !important; padding: 12px 30px; } .accordion .accordion-item .accordion-body { border: 1px solid var(--primary-color); padding: 20px 30px; } .accordion .accordion-button { background-color: var(--primary-color); color: var(--white); } .accordion .accordion-button::after { display: none; } .accordion .accordion-button::before { position: absolute; content: "\f068"; font-family: "Font Awesome 6 Pro"; font-weight: 700; top: 13px; right: 18px; font-size: 20px; } .accordion .accordion-button.collapsed { background-color: var(--sub-bg); color: var(--heading-color); } .accordion .accordion-button.collapsed::before { content: "+"; } .achievement { overflow: hidden; padding: 80px 0; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: 0px 4px 55px 10px rgba(109, 184, 43, 0.0784313725); } .achievement::before { background-color: rgba(0, 0, 0, 0.6); } .achievement__item { position: relative; } .achievement__item h5 { color: var(--white); text-transform: capitalize; } .achievement__item span { color: var(--primary-color); font-weight: 700; } .achievement__item img { padding: 12px 0; } .achievement__bor-right { position: relative; border-right: var(--border-1px); } .involve-two { position: relative; overflow: hidden; } .involve-two__image { background-image: url("../images/wfce.webp"); background-size: cover; background-position: center; height: 100vh; background-repeat: no-repeat; position: relative; max-width: 600px; } .involve-two__image img { width: 100%; clip-path: polygon(100% 86.207%, 100% 86.207%, 99.926% 86.953%, 99.711% 87.66%, 99.367% 88.32%, 98.905% 88.922%, 98.338% 89.458%, 97.677% 89.917%, 96.934% 90.291%, 96.12% 90.57%, 95.247% 90.744%, 94.326% 90.805%, 77.872% 90.805%, 77.872% 90.805%, 76.952% 90.865%, 76.079% 91.039%, 75.265% 91.318%, 74.522% 91.692%, 73.86% 92.151%, 73.293% 92.687%, 72.832% 93.289%, 72.488% 93.949%, 72.273% 94.657%, 72.199% 95.402%, 72.199% 95.402%, 72.124% 96.148%, 71.909% 96.856%, 71.565% 97.515%, 71.104% 98.118%, 70.537% 98.653%, 69.876% 99.113%, 69.132% 99.487%, 68.318% 99.766%, 67.445% 99.94%, 66.525% 100%, 5.674% 100%, 5.674% 100%, 4.753% 99.94%, 3.88% 99.766%, 3.066% 99.487%, 2.323% 99.113%, 1.662% 98.653%, 1.095% 98.118%, 0.633% 97.515%, 0.289% 96.856%, 0.074% 96.148%, 0% 95.402%, 0% 13.793%, 0% 13.793%, 0.074% 13.047%, 0.289% 12.34%, 0.633% 11.68%, 1.095% 11.078%, 1.662% 10.542%, 2.323% 10.082%, 3.066% 9.709%, 3.88% 9.43%, 4.753% 9.256%, 5.674% 9.195%, 36.738% 9.195%, 36.738% 9.195%, 37.658% 9.135%, 38.531% 8.961%, 39.345% 8.682%, 40.088% 8.308%, 40.75% 7.849%, 41.317% 7.313%, 41.778% 6.711%, 42.122% 6.051%, 42.337% 5.343%, 42.411% 4.598%, 42.411% 4.598%, 42.486% 3.852%, 42.701% 3.144%, 43.045% 2.485%, 43.506% 1.882%, 44.073% 1.347%, 44.734% 0.887%, 45.478% 0.513%, 46.292% 0.234%, 47.165% 0.06%, 48.085% 0%, 94.326% 0%, 94.326% 0%, 95.247% 0.06%, 96.12% 0.234%, 96.934% 0.513%, 97.677% 0.887%, 98.338% 1.347%, 98.905% 1.882%, 99.367% 2.485%, 99.711% 3.144%, 99.926% 3.852%, 100% 4.598%, 100% 86.207%); } .involve-two__shape { position: absolute; right: 10px; bottom: 10%; z-index: -1; } .testimonial { overflow: hidden; } .testimonial__item { background-color: var(--white); } .testimonial__item-head { display: flex; align-items: center; justify-content: space-between; padding: 30px; border-bottom: var(--border-1px); } .testimonial__item-head i { font-size: 60px; color: var(--primary-color); } .testimonial__item-content { padding: 30px; } .testimonial__item-content p { font-size: 22px; font-weight: 500; line-height: 35px; color: #676767; } .statistic-area { position: relative; } .statistic__item { padding: 30px; border-radius: 16px; height: 100%; } .statistic__item h2, .statistic__item span { color: var(--primary-color); font-weight: 600; font-size: 60px; line-height: 83px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--primary-color); color: transparent; } .filter__list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; } .filter__list li { color: var(--heading-color); margin-left: 30px; font-weight: 500; cursor: pointer; padding: 5px; } .filter__list .active { color: var(--primary-color); } @keyframes ring-animation { from { transform: rotate3d(0, 0, 1, 0deg); } 20%, 32%, 44%, 56%, 68% { transform: rotate3d(0, 0, 1, 0deg); } 23%, 35%, 47%, 59%, 71% { transform: rotate3d(0, 0, 1, 15deg); } 26%, 38%, 50%, 62%, 74% { transform: rotate3d(0, 0, 1, 0deg); } 29%, 41%, 53%, 65%, 77% { transform: rotate3d(0, 0, 1, -15deg); } 80% { transform: rotate3d(0, 0, 1, 0deg); } } @media screen and (max-width: 991px) { br { display: none; } } @media screen and (max-width: 424px) { .section-header h2 { font-size: 30px; font-weight: 600; line-height: 38px; } .pt-5 { padding-top: 65px; } .pb-5 { padding-bottom: 65px; } } @media screen and (max-width: 1200px) { .header-wrapper .logo-menu { max-width: 137px; } .header-wrapper .main-menu li a { font-size: 16px; padding: 20px 5px; } .header-section { padding: 10px 0; } .header-wrapper .logo-menu { padding: 0px 0px; } .main-menu { position: absolute; top: 100%; width: 100%; display: inline !important; left: 0; z-index: 999; padding: 15px 15px; background: var(--white); transition: var(--transition) !important; transform-origin: top; overflow-y: auto; overflow-x: hidden; } .main-menu:not(.active) { display: none !important; transition: var(--transition); } .main-menu li { width: 100%; } .main-menu li:not(:last-child) { border-bottom: 1px solid var(--border); margin-right: 0 !important; } .main-menu li a { display: block; padding: 14px 0px; } .main-menu .active a { color: var(--black); } .header-bar { position: relative; width: 25px; height: 20px; } .header-bar span { position: absolute; width: 100%; height: 2px; display: inline-block; transition: var(--transition); left: 0; } .header-bar span:first-child { top: 0; background: var(--primary-color); } .header-bar span:nth-child(2) { top: 44%; background: var(--primary-color); } .header-bar span:last-child { bottom: 0; background: var(--primary-color); } .header-bar.active span:first-child { transform: rotate(45deg) translate(3px, 9px); } .header-bar.active span:nth-child(2) { opacity: 0; } .header-bar.active span:last-child { transform: rotate(-45deg) translate(3px, -9px); } .header-bar:hover { cursor: pointer; } .header-wrapper .main-menu li .sub-menu { background: var(--white); position: relative; transform: translateY(2px); } .header-wrapper .main-menu li .sub-menu li a { color: var(--heading-color); padding: 10px 20px; } .menu-btn a { margin-left: 0px !important; margin-top: 30px; padding: 15px 30px; width: 180px !important; } } @media screen and (max-width: 424px) { .about_info .btn-one, .about_info .btn-one-light, .about_info .btn-one-white, .about_info .btn-two, .about_info .btn-two-light { font-size: 12px; padding: 10px; margin-right: 10px; } } @media screen and (max-width: 1399px) { .about-two__image { max-width: 420px; margin: 0 auto; } .about-two__image .sm-image { max-width: 250px; position: absolute; top: 30px; right: -80px; } .about-two__image .stroke-text { position: absolute; right: -35%; bottom: 15%; } .about-two__image .stroke-text h2 { font-size: 30px; } .involve-two { overflow: hidden; } .involve-two__image { max-width: 509px; margin: 0 auto; } .involve-two__image img { width: 100%; } } @media screen and (max-width: 991px) { .achievement__item { text-align: center; } .achievement__bor-right { border-right: none; } } @media screen and (max-width: 575px) { .about-two { overflow: hidden; position: relative; } } @media screen and (max-width: 424px) { .testimonial__item-head i { font-size: 20px; } .testimonial__item-content p { font-size: 16px; line-height: 28px; } .achievement__item { width: 100%; margin-bottom: 30px; } } /* ============================================= About Page — Complete Redesign ============================================= */ .about-hero { position: relative; padding: 160px 100px 100px; overflow: hidden; min-height: 520px; display: flex; align-items: center; } .about-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .about-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15, 35, 10, 0.88) 0%, rgba(30, 70, 20, 0.7) 100%); } .about-hero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(109, 184, 43, 0.08); border: 1px solid rgba(109, 184, 43, 0.35); color: #a7ff49; padding: 5px 15px; border-radius: 20px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 28px; } .about-hero__content h1 { font-family: "Montserrat", sans-serif; color: #fff; font-size: clamp(36px, 5vw, 54px); font-weight: 600; line-height: 1.1; letter-spacing: -2px; margin-bottom: 24px; max-width: 650px; } .about-hero__content p { color: rgba(255, 255, 255, 0.8); font-size: 17px; line-height: 1.7; max-width: 550px; } .about-mission { background: #fff; } .about-mission__images { position: relative; height: 100%; } .about-mission__img-main { border-radius: 0; overflow: visible; height: 100%; } .about-mission__img-main img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; min-height: 450px; } .about-mission__img-float { position: absolute; bottom: -30px; right: -30px; width: 200px; height: 200px; border-radius: 16px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .about-mission__img-float img { width: 100%; height: 100%; object-fit: cover; } .about-mission__label { display: inline-flex; align-items: center; gap: 8px; color: #6db82b; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; } .about-mission__content h2 { font-size: 36px; font-weight: 800; color: #1a1a1a; line-height: 1.25; margin-bottom: 20px; } .about-mission__content p { color: #666; font-size: 16px; line-height: 1.8; } .about-feature-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f8faf5; border-radius: 12px; transition: all 0.3s ease; border: 1px solid #eef3e8; } .about-feature-item:hover { background: #fff; box-shadow: 0 4px 16px rgba(109, 184, 43, 0.12); transform: translateY(-2px); } .about-feature-item i { color: #6db82b; font-size: 18px; width: 20px; text-align: center; } .about-feature-item span { font-weight: 600; color: #333; font-size: 14px; } .about-timeline { background: #f8faf5; } .about-timeline__track { position: relative; } .about-timeline__track::before { content: ''; position: absolute; top: 122px; left: 15%; right: 15%; height: 3px; background: linear-gradient(90deg, #ddd, #6db82b, #ddd); z-index: 0; } .about-timeline__card { background: #fff; border-radius: 20px; padding: 36px 28px; text-align: center; position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); transition: all 0.4s ease; border: 1px solid #eee; z-index: 1; } .about-timeline__card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(109, 184, 43, 0.15); border-color: #6db82b; } .about-timeline__card--active { border-color: #6db82b; box-shadow: 0 8px 30px rgba(109, 184, 43, 0.12); } .about-timeline__year { display: inline-block; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6db82b, #389416); padding: 6px 20px; border-radius: 50px; margin-bottom: 20px; letter-spacing: 1px; } .about-timeline__dot { width: 14px; height: 14px; background: #6db82b; border-radius: 50%; margin: 0 auto 20px; box-shadow: 0 0 0 5px rgba(109, 184, 43, 0.2); } .about-timeline__card h4 { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; } .about-timeline__card p { color: #777; font-size: 14px; line-height: 1.6; margin-bottom: 16px; } .about-timeline__icon { width: 48px; height: 48px; border-radius: 12px; background: #f1f8e9; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .about-timeline__icon i { color: #6db82b; font-size: 20px; } .about-stats { background: #fff; } .about-stats__inner { background: linear-gradient(350deg, #ade038 0%, #2b9409 40%, #3a7028 100%); border-radius: 24px; padding: 60px 40px; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(27, 58, 19, 0.25); } .about-stats__inner::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(109, 184, 43, 0.12) 0%, transparent 70%); border-radius: 50%; } .about-stats__item { padding: 20px; } .about-stats__icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #6db82b, #95d43a); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 6px 16px rgba(109, 184, 43, 0.3); } .about-stats__icon i { color: #fff; font-size: 22px; } .about-stats__item h2 { color: #fff; font-size: 38px; font-weight: 800; margin-bottom: 6px; } .about-stats__item p { color: rgba(255, 255, 255, 0.7); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .about-team { background: #f8faf5; } .about-team__card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); transition: all 0.4s ease; border: 1px solid #eee; } .about-team__card:hover { transform: translateY(-8px); box-shadow: 0 16px 36px rgba(109, 184, 43, 0.12); } .about-team__img { height: 280px; overflow: hidden; } .about-team__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .about-team__card:hover .about-team__img img { transform: scale(1.08); } .about-team__info { padding: 20px 24px; text-align: center; } .about-team__info h5 { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; } .about-team__info span { color: #6db82b; font-size: 14px; font-weight: 600; } @media (max-width: 991px) { .about-hero__content h1 { font-size: 36px; } .about-hero { padding: 150px 0 80px; min-height: auto; } .about-mission__content h2 { font-size: 28px; } .about-mission__img-float { width: 150px; height: 150px; right: -15px; bottom: -15px; } .about-timeline__track::before { display: none; } } @media (max-width: 575px) { .about-hero__content h1 { font-size: 28px; } .about-hero { padding: 120px 20px 60px; } .about-mission__img-main img { min-height: 300px; } .about-mission__img-float { display: none; } .about-stats__inner { padding: 40px 20px; border-radius: 18px; } .about-stats__item h2 { font-size: 28px; } .about-team__img { height: 220px; } } /* ============================================= Toast Notifications — Theme Styled ============================================= */ .nexum-toast { min-width: 320px; max-width: 420px; border: none; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); animation: toastSlideIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .nexum-toast .toast-header { border-bottom: none; padding: 14px 18px 4px; background: transparent; } .nexum-toast .toast-body { padding: 4px 18px 16px; font-size: 14px; line-height: 1.5; } .nexum-toast .btn-close { filter: brightness(0) invert(1); opacity: 0.7; } .nexum-toast .btn-close:hover { opacity: 1; } .nexum-toast__icon { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 16px; } @media (max-width: 575px) { .nexum-toast { min-width: 280px; max-width: calc(100vw - 32px); } } /* ============================================= Contact Page — Modern Redesign ============================================= */ .ct-quick-cards { margin-top: -60px; position: relative; z-index: 3; padding-bottom: 0; } .ct-quick-cards__row { display: flex; flex-wrap: wrap; } .ct-quick-cards__row>[class*="col-"] { display: flex; } .ct-info-card { display: flex; align-items: center; gap: 18px; width: 100%; background: #fff; border-radius: 16px; padding: 28px 24px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); text-decoration: none; transition: all 0.35s ease; border: 1px solid #eee; } .ct-info-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(109, 184, 43, 0.15); border-color: #6db82b; text-decoration: none; } .ct-info-card__icon { width: 52px; height: 52px; min-width: 52px; border-radius: 14px; background: linear-gradient(135deg, #6db82b, #389416); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(109, 184, 43, 0.3); transition: transform 0.3s ease; } .ct-info-card__icon i { color: #fff; font-size: 20px; } .ct-info-card h5 { margin: 0; font-size: 15px; font-weight: 600; color: #333; line-height: 1.5; } .ct-form-wrapper { height: 100%; display: flex; flex-direction: column; } .ct-input { height: 50px; border-radius: 12px !important; border: 1px solid #e0e0e0 !important; padding: 12px 18px; font-size: 15px; transition: border-color 0.3s, box-shadow 0.3s; background: #fafafa !important; } .ct-input:focus { border-color: #6db82b !important; box-shadow: 0 0 0 3px rgba(109, 184, 43, 0.12) !important; background: #fff !important; } textarea.ct-input { height: auto; min-height: 130px; resize: vertical; } .ct-map-wrapper { height: 100%; min-height: 500px; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); border: 1px solid #eee; } .ct-map-wrapper iframe { width: 100%; height: 100%; border: none; display: block; } .ct-faq__item { background: #fff; border-radius: 14px; margin-bottom: 14px; border: 1px solid #eee; overflow: hidden; transition: all 0.3s ease; } .ct-faq__item:hover { box-shadow: 0 6px 20px rgba(109, 184, 43, 0.08); border-color: #c5e1a5; } .ct-faq__question { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; transition: all 0.3s ease; gap: 16px; } .ct-faq__question span { font-size: 16px; font-weight: 700; color: #1a1a1a; } .ct-faq__question i { color: #6db82b; font-size: 14px; transition: transform 0.3s ease; min-width: 16px; } .ct-faq__question:not(.collapsed) i { transform: rotate(180deg); } .ct-faq__question:not(.collapsed) span { color: #6db82b; } .ct-faq__answer { padding: 0 24px 20px; } .ct-faq__answer p { margin: 0; color: #666; font-size: 15px; line-height: 1.8; } @media (max-width: 991px) { .ct-quick-cards { margin-top: -40px; } .ct-map-wrapper { min-height: 350px; } } @media (max-width: 575px) { .ct-quick-cards { margin-top: -30px; } .ct-info-card { padding: 20px 18px; } .ct-map-wrapper { min-height: 280px; } } /* ============================================= Investors Page — Modern Cards & Tables ============================================= */ .inv-progress-card { background: #fff; border-radius: 20px; padding: 36px 32px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); border: 1px solid #eef3e8; } .inv-progress-item { margin-bottom: 24px; } .inv-progress-item:last-child { margin-bottom: 0; } .inv-progress-label { font-weight: 600; color: #333; font-size: 15px; } .inv-progress-label i { color: #6db82b; } .inv-progress-pct { font-weight: 800; color: #6db82b; font-size: 15px; } .inv-progress-bar { height: 10px; background: #eef3e8; border-radius: 10px; overflow: hidden; } .inv-progress-fill { height: 100%; background: linear-gradient(90deg, #6db82b, #389416); border-radius: 10px; transition: width 1.5s ease; } .inv-badge { display: inline-block; padding: 5px 16px; border-radius: 50px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-top: auto; } .inv-badge--primary { background: #e8f5e9; color: #2e7d32; } .inv-badge--success { background: #e0f2f1; color: #00695c; } .inv-badge--secondary { background: #f3e5f5; color: #6a1b9a; } .inv-badge--info { background: #e3f2fd; color: #1565c0; } .inv-badge--warning { background: #fff3e0; color: #e65100; } .inv-total-banner { background: linear-gradient(135deg, #6db82b, #389416); border-radius: 16px; padding: 24px 32px; display: flex; align-items: center; justify-content: center; gap: 16px; box-shadow: 0 8px 24px rgba(109, 184, 43, 0.3); } .inv-total-banner i { color: #fff; font-size: 28px; } .inv-total-banner h3 { color: #fff; margin: 0; font-size: 22px; font-weight: 700; } .inv-table-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); border: 1px solid #eef3e8; } .inv-table { width: 100%; border-collapse: collapse; margin: 0; } .inv-table thead tr { background: linear-gradient(135deg, #1b3a13, #2d5a1e); } .inv-table thead th { color: #fff; padding: 16px 20px; font-size: 15px; font-weight: 700; border: none; } .inv-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background 0.2s ease; } .inv-table tbody tr:hover { background: #f8faf5; } .inv-table tbody td { padding: 14px 20px; font-size: 15px; color: #444; border: none; } .inv-table tfoot tr { background: linear-gradient(135deg, #6db82b, #389416); } .inv-table tfoot td { color: #fff; padding: 16px 20px; font-size: 16px; font-weight: 800; border: none; } .inv-table--compare thead th.inv-table--highlight { background: rgba(109, 184, 43, 0.15); } .fw-600 { font-weight: 600; } /* ============================================= Solutions Page — Crisis & Scale Sections ============================================= */ .sol-stat-highlight { background: linear-gradient(135deg, #f1f8e9, #e8f5e9); border: 1px solid #c5e1a5; border-radius: 16px; padding: 24px 20px; text-align: center; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; justify-content: center; } .sol-stat-highlight:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(109, 184, 43, 0.15); } .sol-stat-highlight__number { font-size: 32px; font-weight: 800; color: #2d5a1e; line-height: 1; margin-bottom: 8px; } .sol-stat-highlight__label { font-size: 13px; color: #666; font-weight: 500; } .sol-challenge-list { display: flex; flex-direction: column; gap: 16px; } .sol-challenge-item { display: flex; align-items: center; gap: 16px; background: #f5fff5; border: 1px solid #eef3e8; border-radius: 14px; padding: 20px; transition: all 0.3s ease; } .sol-challenge-item:hover { transform: translateX(6px); box-shadow: 0 6px 20px rgba(109, 184, 43, 0.1); border-color: #6db82b; } .sol-challenge-item__icon { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; background: linear-gradient(135deg, #6db82b, #389416); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(109, 184, 43, 0.25); } .sol-challenge-item__icon i { color: #fff; font-size: 16px; } .sol-challenge-item__text p { margin: 0; color: #555; font-size: 15px; line-height: 1.6; } .sol-scale-image { height: 100%; border-radius: 0; overflow: visible; } .sol-scale-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; min-height: 400px; } .sol-scale-content { display: flex; flex-direction: column; justify-content: center; height: 100%; } .sol-scale-features { display: flex; flex-direction: column; gap: 16px; } .sol-scale-feature { background: #fff; display: flex; align-items: center; gap: 16px; border: 1px solid #eef3e8; border-radius: 14px; padding: 20px; height: 100%; transition: all 0.3s ease; } .sol-scale-feature:hover { transform: translateX(10px); box-shadow: 0 6px 20px rgba(109, 184, 43, 0.1); border-color: #6db82b; } .sol-scale-feature__icon { width: 40px; height: 40px; min-width: 40px; border-radius: 12px; background: linear-gradient(135deg, #6db82b, #389416); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(109, 184, 43, 0.25); } .sol-scale-feature__icon i { color: #fff; font-size: 16px; } .sol-scale-feature p { margin: 0; color: #444; font-size: 18px; line-height: 1.6; font-weight: 500; } @media (max-width: 991px) { .sol-scale-image img { min-height: 300px; margin-bottom: 20px; } .sol-stat-highlight__number { font-size: 26px; } } @media (max-width: 575px) { .sol-challenge-item { padding: 16px; } .sol-scale-feature { padding: 16px; } } /* ============================================= Wildfire Wood — Product Cards & Step Numbers ============================================= */ .ww-card-row { display: flex; flex-wrap: wrap; } .ww-card-row>[class*="col-"] { display: flex; } .ww-product-card { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid #eef3e8; border-radius: 20px; padding: 36px 28px; transition: all 0.4s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); } .ww-product-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(109, 184, 43, 0.14); border-color: #6db82b; } .ww-product-card__icon { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, #6db82b, #389416); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 6px 18px rgba(109, 184, 43, 0.3); transition: transform 0.3s ease; } .ww-product-card__icon i { color: #fff; font-size: 24px; } .ww-product-card h4 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; } .ww-product-card p { color: #666; font-size: 15px; line-height: 1.7; margin-bottom: 16px; } .ww-product-card__specs { list-style: none; padding: 0; margin: 0; margin-top: auto; border-top: 1px solid #eef3e8; padding-top: 16px; } .ww-product-card__specs li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: #555; } .ww-product-card__specs li i { color: #6db82b; font-size: 12px; min-width: 14px; } .ww-step-number { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #6db82b, #389416); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 20px; box-shadow: 0 6px 18px rgba(109, 184, 43, 0.3); transition: transform 0.3s ease; } .bf-feature-card:hover .ww-step-number { transform: scale(1.1); } /* ============================================= Biofuels Feature Cards — Equal Height ============================================= */ .bf-features-row { display: flex; flex-wrap: wrap; } .bf-features-row>[class*="col-"] { display: flex; } .bf-feature-card { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; background: #fff; border: 1px solid #eef3e8; border-radius: 20px; padding: 40px 28px; transition: all 0.4s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); } .bf-feature-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(109, 184, 43, 0.14); border-color: #6db82b; } .bf-feature-card__icon { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg, #6db82b, #389416); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; box-shadow: 0 8px 24px rgba(109, 184, 43, 0.3); transition: transform 0.3s ease; } .bf-feature-card__icon i { color: #fff; font-size: 28px; } .bf-feature-card h4 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; } .bf-feature-card p { color: #666; font-size: 15px; line-height: 1.7; flex: 1; } /* ============================================= Global rounded images — home page ============================================= */ .about-two__image img, .about-two__image .info, .about-two__image .sm-image img, .involve-two__image img, .achievement, .work, .image img, .banner-two__image, .banner-two { border-radius: 16px; overflow: hidden; } .achievement { border-radius: 20px !important; } .involve-two .row.g-4 { align-items: stretch !important; } .involve-two__image { background-image: none !important; height: 100% !important; border-radius: 0; overflow: visible; } .involve-two__image img { width: 100%; height: 100%; display: block; border-radius: 0; object-fit: cover; clip-path: polygon(0% 86.207%, 0% 86.207%, 0.074% 86.953%, 0.289% 87.66%, 0.633% 88.32%, 1.095% 88.922%, 1.662% 89.458%, 2.323% 89.917%, 3.066% 90.291%, 3.88% 90.57%, 4.753% 90.744%, 5.674% 90.805%, 22.128% 90.805%, 22.128% 90.805%, 23.048% 90.865%, 23.921% 91.039%, 24.735% 91.318%, 25.478% 91.692%, 26.14% 92.151%, 26.707% 92.687%, 27.168% 93.289%, 27.512% 93.949%, 27.727% 94.657%, 27.801% 95.402%, 27.801% 95.402%, 27.876% 96.148%, 28.091% 96.856%, 28.435% 97.515%, 28.896% 98.118%, 29.463% 98.653%, 30.124% 99.113%, 30.868% 99.487%, 31.682% 99.766%, 32.555% 99.94%, 33.475% 100%, 94.326% 100%, 94.326% 100%, 95.247% 99.94%, 96.12% 99.766%, 96.934% 99.487%, 97.677% 99.113%, 98.338% 98.653%, 98.905% 98.118%, 99.367% 97.515%, 99.711% 96.856%, 99.926% 96.148%, 100% 95.402%, 100% 13.793%, 100% 13.793%, 99.926% 13.047%, 99.711% 12.34%, 99.367% 11.68%, 98.905% 11.078%, 98.338% 10.542%, 97.677% 10.082%, 96.934% 9.709%, 96.12% 9.43%, 95.247% 9.256%, 94.326% 9.195%, 63.262% 9.195%, 63.262% 9.195%, 62.342% 9.135%, 61.469% 8.961%, 60.655% 8.682%, 59.912% 8.308%, 59.25% 7.849%, 58.683% 7.313%, 58.222% 6.711%, 57.878% 6.051%, 57.663% 5.343%, 57.589% 4.598%, 57.589% 4.598%, 57.514% 3.852%, 57.299% 3.144%, 56.955% 2.485%, 56.494% 1.882%, 55.927% 1.347%, 55.266% 0.887%, 54.522% 0.513%, 53.708% 0.234%, 52.835% 0.06%, 51.915% 0%, 5.674% 0%, 5.674% 0%, 4.753% 0.06%, 3.88% 0.234%, 3.066% 0.513%, 2.323% 0.887%, 1.662% 1.347%, 1.095% 1.882%, 0.633% 2.485%, 0.289% 3.144%, 0.074% 3.852%, 0% 4.598%, 0% 86.207%); } @media (max-width: 1199px) { .involve-two__image, .involve-two__image img { height: auto !important; max-height: 500px; } } @media (max-width: 767px) { .involve-two__image, .involve-two__image img { max-height: 350px; } } .process-icon-badge { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; background: linear-gradient(135deg, #6db82b, #389416); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(109, 184, 43, 0.3); } .process-icon-badge i { color: #fff; font-size: 20px; } /* ============================================= Hero Banner Fix — alignment & modern button ============================================= */ .btn-hero { display: inline-flex; align-items: center; gap: 10px; padding: 12px 28px; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #6db82b, #389416); border: none; border-radius: 50px; text-decoration: none; transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 4px 16px rgba(109, 184, 43, 0.35); position: relative; overflow: hidden; } .btn-hero span { color: #fff; position: relative; z-index: 1; } .btn-hero i { color: #fff; font-size: 13px; position: relative; z-index: 1; transition: transform 0.3s ease; } .btn-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(109, 184, 43, 0.45); color: #fff; text-decoration: none; } .btn-hero:hover i { transform: translateX(4px); } .btn-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #389416, #2b7a12); opacity: 0; transition: opacity 0.35s ease; border-radius: 50px; } .btn-hero:hover::before { opacity: 1; } @media (max-width: 575px) { .btn-hero { padding: 10px 24px; font-size: 14px; } } .btn-one:hover, .btn-two:hover { background-color: #5aa622; } .btn-one::before, .btn-two::before { background-color: #5aa622; } ::selection { background-color: #6db82b; color: #fff; } ::-webkit-scrollbar-thumb { background-color: #6db82b; } .accordion-button:not(.collapsed) { color: #6db82b; background-color: #F1F8E9; } .accordion-button:focus { border-color: #6db82b; box-shadow: 0 0 0 0.15rem rgba(109, 184, 43, 0.25); } /* Table NEXUM highlight */ .achievement h2, .statistic__item .count { color: #6db82b; } .achievement--contained { padding: 60px 40px; } .achievement--contained .achievement__item h5 { color: white; } .lang-selector li a { text-decoration: none; color: rgba(255, 255, 255, 0.7); padding: 5px 10px; font-size: 14px; font-weight: 500; transition: color 0.3s; } .lang-selector li.active a { font-weight: bold; color: #6db82b; } .lang-selector li a:hover { color: #6db82b; } .err_input { border-color: #dc3545 !important; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } .auth-form-wrapper { background: #fff; border-radius: 12px; padding: 40px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); border: 1px solid #eee; } .auth-input { height: 50px; border-radius: 8px; border: 1px solid #ddd; padding: 10px 16px; font-size: 15px; transition: border-color 0.3s, box-shadow 0.3s; } .auth-input:focus { border-color: #6db82b; box-shadow: 0 0 0 0.15rem rgba(109, 184, 43, 0.25); } .password-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #999; font-size: 16px; transition: color 0.2s; z-index: 5; user-select: none; } .password-toggle:hover { color: #6db82b; } .auth-form-wrapper .form-label { font-weight: 600; color: #333; margin-bottom: 6px; } .auth-form-wrapper .btn-one { display: block; text-align: center; padding: 14px 30px; } /* ============================================= Technology Cards — Equal Height ============================================= */ .work .row.g-4 { display: flex; flex-wrap: wrap; } .work .row.g-4>[class*="col-"] { display: flex; } .work__item { display: flex; flex-direction: column; width: 100%; border-radius: 16px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1) !important; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .work__item:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25) !important; border-color: rgba(109, 184, 43, 0.4) !important; } .work .work__item { background: #fff !important; border: 1px solid #eef3e8 !important; } .work .work__item:hover { background: #f8faf5 !important; border-color: var(--primary-color) !important; } .work .work__item p { flex: 1; margin: 16px 0 20px; font-size: 15px; line-height: 1.6; color: #555 !important; } .work .work__item h3 a { color: #1a1a1a !important; font-size: 20px; font-weight: 700; } .work .work__item h3 a:hover { color: #6db82b !important; } .work .work__item-icon span { color: transparent !important; -webkit-text-stroke-color: rgba(109, 184, 43, 0.35) !important; } .work .work__item:hover .work__item-icon span { color: transparent !important; -webkit-text-stroke-color: rgba(109, 184, 43, 0.6) !important; } .work .work__item-arrow { color: #333 !important; margin-top: auto; } .work .work__item:hover .work__item-arrow { color: #6db82b !important; } .work .work__item-arrow::before { color: #6db82b !important; } /* ============================================= Modern Product Cards ============================================= */ .nexum-products { background: #eef5e6; position: relative; } .product-card { display: block; border-radius: 16px; background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease; text-decoration: none; height: 100%; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(109, 184, 43, 0.15); text-decoration: none; } .product-card__image { position: relative; height: 220px; overflow: hidden; } .product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .product-card:hover .product-card__image img { transform: scale(1.1); } .product-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.5) 100%); transition: opacity 0.4s ease; } .product-card:hover .product-card__overlay { background: linear-gradient(180deg, transparent 20%, rgba(109, 184, 43, 0.4) 100%); } .product-card__content { padding: 24px; position: relative; } .product-card__icon { width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg, #6db82b, #389416); display: flex; align-items: center; justify-content: center; margin-top: -50px; margin-left: -50px; margin-bottom: 16px; /* padding-left: 5px; padding-top: 5px; */ position: relative; z-index: 2; box-shadow: 0 6px 16px rgba(109, 184, 43, 0.35); transition: transform 0.3s ease; } .product-card__icon i { color: #fff; font-size: 22px; } .product-card__content h4 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; transition: color 0.3s ease; } .product-card:hover .product-card__content h4 { color: #6db82b; } .product-card__content p { font-size: 14px; color: #777; margin-bottom: 16px; line-height: 1.5; } .product-card__link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #6db82b; transition: gap 0.3s ease; } .product-card:hover .product-card__link { gap: 14px; } .product-card__link i { font-size: 12px; transition: transform 0.3s ease; } .product-card:hover .product-card__link i { transform: translateX(4px); } @media (max-width: 991px) { .product-card__image { height: 180px; } } @media (max-width: 575px) { .product-card__image { height: 200px; } .product-card__content { padding: 20px; } .product-card__content h4 { font-size: 18px; } } /* ============================================= Impact / Achievement Section ============================================= */ .nexum-impact__inner { background: linear-gradient(350deg, #ade038 0%, #2b9409 40%, #3a7028 100%); border-radius: 24px; padding: 60px 50px; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(27, 58, 19, 0.3); } .nexum-impact__inner::before { content: ''; position: absolute; top: -60%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(109, 184, 43, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .nexum-impact__inner::after { content: ''; position: absolute; bottom: -40%; left: -5%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(109, 184, 43, 0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .nexum-impact__heading h2 { font-size: 32px; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 16px; } .nexum-impact__heading p { color: rgba(255, 255, 255, 0.7); font-size: 15px; line-height: 1.7; } .nexum-impact__stat { background: rgba(255, 255, 255); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 30px 24px; text-align: center; transition: transform 0.3s ease, background 0.3s ease; } .nexum-impact__stat:hover { transform: translateY(-6px); } .nexum-impact__stat-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #6db82b, #95d43a); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 8px 20px rgba(109, 184, 43, 0.3); } .nexum-impact__stat-icon i { color: #fff; font-size: 22px; } .nexum-impact__stat-number { margin-bottom: 8px; color: #000000; } .nexum-impact__stat-number .count { font-size: 38px; font-weight: 800; line-height: 1; } .nexum-impact__stat-suffix { font-size: 28px; font-weight: 700; color: var(--primary-color); } .nexum-impact__stat h5 { text-transform: capitalize; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; } @media (max-width: 991px) { .nexum-impact__inner { padding: 40px 30px; } .nexum-impact__heading { text-align: center; margin-bottom: 20px; } .nexum-impact__heading h2 { font-size: 26px; } } @media (max-width: 575px) { .nexum-impact__inner { padding: 30px 20px; border-radius: 18px; } .nexum-impact__stat { padding: 24px 18px; border-radius: 16px; } .nexum-impact__stat-number .count { font-size: 30px; } } /* ======================================== Minimal Footer ======================================== */ .footer-minimal { background-color: var(--secondary-color); padding: 20px 0; } .footer-minimal__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .footer-minimal__logo img { width: 160px; height: auto; } .footer-minimal__links ul { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .footer-minimal__links ul a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 14px; transition: color 0.3s; } .footer-minimal__links ul a:hover { color: var(--primary-color); } .footer-minimal__sep { color: rgba(255, 255, 255, 0.3); font-size: 14px; user-select: none; } .footer-minimal__copyright p { margin: 0; color: rgba(255, 255, 255, 0.5); font-size: 13px; white-space: nowrap; } .footer-minimal .lang-selector { gap: 2px; } /* ======================================== Investor Brochure Download ======================================== */ .inv-brochure { background: #fff; } .inv-brochure__card { display: flex; align-items: center; gap: 32px; background: linear-gradient(135deg, #fafcf7 0%, #fff 100%); border: 1px solid var(--border); border-radius: 24px; padding: 48px 56px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04); transition: box-shadow 0.3s ease, transform 0.3s ease; } .inv-brochure__card:hover { box-shadow: 0 20px 60px rgba(109, 184, 43, 0.1); transform: translateY(-4px); } .inv-brochure__icon { flex-shrink: 0; width: 88px; height: 88px; border-radius: 20px; background: linear-gradient(135deg, rgba(109, 184, 43, 0.12), rgba(109, 184, 43, 0.04)); display: flex; align-items: center; justify-content: center; } .inv-brochure__icon i { font-size: 38px; color: var(--primary-color); } .inv-brochure__body { flex: 1; min-width: 0; } .inv-brochure__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary-color); margin-bottom: 10px; } .inv-brochure__title { font-family: "Montserrat", sans-serif; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; color: var(--heading-color); line-height: 1.3; letter-spacing: -0.5px; margin-bottom: 10px; } .inv-brochure__text { font-size: 14px; line-height: 1.7; color: #666; margin-bottom: 12px; } .inv-brochure__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #999; font-weight: 500; } .inv-brochure__meta i { color: var(--primary-color); } .inv-brochure__action { flex-shrink: 0; } .inv-brochure__btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background: var(--primary-color); color: #fff; border-radius: 12px; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.3s ease; box-shadow: 0 8px 24px rgba(109, 184, 43, 0.25); } .inv-brochure__btn:hover { background: #5da024; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(109, 184, 43, 0.35); } .inv-brochure__btn i { font-size: 15px; } @media (max-width: 991px) { .inv-brochure__card { flex-direction: column; text-align: center; gap: 24px; padding: 40px 32px; } .inv-brochure__body { width: 100%; } } @media (max-width: 575px) { .inv-brochure__card { padding: 32px 24px; } .inv-brochure__icon { width: 72px; height: 72px; } .inv-brochure__icon i { font-size: 30px; } .inv-brochure__btn { width: 100%; justify-content: center; } } /* ======================================== Investor Access Gate ======================================== */ .inv-gate-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 160px 20px 80px; background: linear-gradient(180deg, #f8faf5 0%, #fff 100%); } .inv-gate__modal { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 48px 40px; width: 100%; max-width: 420px; text-align: center; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.08); animation: gateSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes gateSlideIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .inv-gate__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(109, 184, 43, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .inv-gate__icon i { font-size: 22px; color: var(--primary-color); } .inv-gate__title { font-family: "Montserrat", sans-serif; font-size: 22px; font-weight: 700; color: var(--heading-color); margin-bottom: 8px; } .inv-gate__desc { font-size: 14px; color: #777; line-height: 1.6; margin-bottom: 28px; } .inv-gate__field { position: relative; margin-bottom: 8px; } .inv-gate__input { width: 100%; padding: 14px 48px 14px 16px; border: 1.5px solid #e0e0e0; border-radius: 12px; font-size: 15px; font-family: "Inter", sans-serif; color: var(--heading-color); background: #fafafa; outline: none; transition: border-color 0.2s ease, background 0.2s ease; } .inv-gate__input:focus { border-color: var(--primary-color); background: #fff; } .inv-gate__input--error { border-color: #e53935; background: #fff5f5; } .inv-gate__eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #aaa; font-size: 15px; padding: 4px; transition: color 0.2s ease; } .inv-gate__eye:hover { color: #555; } .inv-gate__error { font-size: 13px; color: #e53935; min-height: 20px; margin-bottom: 8px; opacity: 0; transition: opacity 0.2s ease; } .inv-gate__error.visible { opacity: 1; } .inv-gate__btn { width: 100%; padding: 14px 24px; border: none; border-radius: 12px; background: var(--primary-color); color: #fff; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s ease, transform 0.1s ease; } .inv-gate__btn:hover { background: #5da024; } .inv-gate__btn:active { transform: scale(0.98); } .inv-gate__btn:disabled { opacity: 0.7; cursor: not-allowed; } .inv-gate__back { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 13px; color: #999; text-decoration: none; transition: color 0.2s ease; } .inv-gate__back:hover { color: var(--primary-color); } @media (max-width: 575px) { .inv-gate__modal { margin: 0 16px; padding: 36px 24px; } } /* ======================================== Certification Ready — Minimal ======================================== */ .cert-ready { background: #f8faf5; } .cert-ready__inner { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 60px 48px; } .cert-ready__header { text-align: center; margin-bottom: 48px; } .cert-ready__tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary-color); margin-bottom: 16px; } .cert-ready__tag i { margin-right: 6px; } .cert-ready__title { font-family: "Montserrat", sans-serif; font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: var(--heading-color); margin-bottom: 12px; letter-spacing: -0.5px; } .cert-ready__desc { font-size: 15px; line-height: 1.7; color: #666; max-width: 560px; margin: 0 auto; } .cert-ready__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cert-ready__item { text-align: center; padding: 32px 16px; border-radius: 16px; border: 1px solid var(--border); background: #fafcf7; transition: all 0.3s ease; } .cert-ready__item:hover { border-color: rgba(109, 184, 43, 0.3); background: rgba(109, 184, 43, 0.04); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(109, 184, 43, 0.08); } .cert-ready__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(109, 184, 43, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; transition: all 0.3s ease; } .cert-ready__item:hover .cert-ready__icon { background: var(--primary-color); } .cert-ready__icon i { font-size: 18px; color: var(--primary-color); transition: color 0.3s ease; } .cert-ready__item:hover .cert-ready__icon i { color: #fff; } .cert-ready__label { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: var(--heading-color); line-height: 1.4; } @media (max-width: 991px) { .cert-ready__grid { grid-template-columns: repeat(2, 1fr); } .cert-ready__inner { padding: 40px 28px; } } @media (max-width: 575px) { .cert-ready__grid { grid-template-columns: 1fr 1fr; gap: 12px; } .cert-ready__item { padding: 24px 12px; } .cert-ready__inner { padding: 32px 20px; } } /* ======================================== Pre-Footer CTA Band ======================================== */ .prefooter-cta { position: relative; padding: 100px 0; background: #f8faf5; overflow: hidden; } .prefooter-cta__pattern { position: absolute; inset: 0; opacity: 0.06; background-image: linear-gradient(30deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(150deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(30deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(150deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(60deg, rgba(109, 184, 43, 0.45) 25%, transparent 25.5%, transparent 75%, rgba(109, 184, 43, 0.45) 75%, rgba(109, 184, 43, 0.45)), linear-gradient(60deg, rgba(109, 184, 43, 0.45) 25%, transparent 25.5%, transparent 75%, rgba(109, 184, 43, 0.45) 75%, rgba(109, 184, 43, 0.45)); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; pointer-events: none; } .prefooter-cta__title { font-family: "Montserrat", sans-serif; font-size: clamp(28px, 4vw, 44px); font-weight: 600; color: var(--primary-color); line-height: 1.2; margin-bottom: 20px; letter-spacing: -1px; } .prefooter-cta__text { font-size: 17px; line-height: 1.75; max-width: 540px; margin: 0 auto 36px; } @media (max-width: 575px) { .prefooter-cta { padding: 70px 0; } .prefooter-cta__text { font-size: 15px; } } @media (max-width: 767.98px) { .footer-minimal__inner { flex-direction: column; text-align: center; gap: 12px; } .footer-minimal__links ul { flex-wrap: wrap; justify-content: center; } .footer-minimal__copyright p { white-space: normal; } } /* ======================================== Cinematic Hero Section ======================================== */ .hero-cinematic { position: relative; width: 100%; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-cinematic__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.08); animation: heroZoom 20s ease-out forwards; will-change: transform; } @keyframes heroZoom { to { transform: scale(1); } } .hero-cinematic__overlay { position: absolute; inset: 0; background: linear-gradient(170deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.5) 70%, rgba(14, 14, 14, 0.85) 100%); z-index: 1; } .hero-cinematic__grain { position: absolute; inset: 0; z-index: 2; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; } .hero-cinematic__content { position: relative; z-index: 3; text-align: center; max-width: 860px; padding: 0 24px; animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes heroFadeIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .hero-cinematic__tag { display: inline-block; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #a7ff49; margin-bottom: 28px; padding: 5px 15px; border: 1px solid rgba(109, 184, 43, 0.35); border-radius: 20px; background: rgba(109, 184, 43, 0.08); animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; } .hero-cinematic__title { font-family: "Montserrat", sans-serif; font-size: clamp(36px, 7vw, 82px); font-weight: 600; line-height: 1.05; color: #fff; margin-bottom: 28px; letter-spacing: -2px; animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; } .hero-cinematic__text { font-family: "Inter", sans-serif; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.75; color: rgba(255, 255, 255, 0.7); max-width: 620px; margin: 0 auto 44px; animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; } .hero-cinematic .btn-hero { animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both; } .hero-cinematic__scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 3; animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both; } .hero-cinematic__scroll span { display: block; width: 24px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 12px; position: relative; } .hero-cinematic__scroll span::after { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 8px; background: rgba(255, 255, 255, 0.6); border-radius: 2px; animation: scrollBounce 2s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { top: 6px; opacity: 1; } 50% { top: 20px; opacity: 0.3; } } @media (max-width: 991px) { .hero-cinematic { min-height: 500px; height: calc(100vh - 52px); } .hero-cinematic__title { letter-spacing: -1px; } } @media (max-width: 575px) { .hero-cinematic { min-height: 450px; } .hero-cinematic__tag { font-size: 10px; letter-spacing: 3px; padding: 6px 14px; margin-bottom: 20px; } .hero-cinematic__text { margin-bottom: 32px; } .hero-cinematic__scroll { bottom: 24px; } } /* ======================================== Technology Stage Sections ======================================== */ .tech-stage__image { position: relative; border-radius: 0; overflow: visible; } .tech-stage__image img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; display: block; border-radius: 0; } .tech-stage__number { position: absolute; top: 20px; left: 20px; font-family: "Montserrat", sans-serif; font-size: 48px; font-weight: 800; color: rgba(255, 255, 255, 0.15); line-height: 1; pointer-events: none; } .tech-stage__title { font-family: "Montserrat", sans-serif; font-size: 32px; font-weight: 800; color: var(--heading-color); margin-bottom: 16px; letter-spacing: -0.5px; } .tech-stage__text { font-size: 16px; line-height: 1.8; color: #666; margin-bottom: 28px; } .tech-stage__stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .tech-stage__stat { flex: 1 1 calc(50% - 6px); min-width: 120px; background: #ffffff; border: 1px solid #eef3e8; border-radius: 12px; padding: 20px; text-align: center; transition: all 0.3s ease; } .tech-stage__stat:hover { border-color: var(--primary-color); box-shadow: 0 4px 16px rgba(109, 184, 43, 0.1); } .tech-stage__stat-value { display: block; font-family: "Montserrat", sans-serif; font-size: 32px; font-weight: 800; color: var(--primary-color); line-height: 1.2; margin-bottom: 4px; } .tech-stage__stat-label { font-size: 16px; color: #888; line-height: 1.4; } .tech-stage__subtitle { font-size: 16px; font-weight: 700; color: var(--heading-color); margin-bottom: 12px; } .tech-stage__list { list-style: none; padding: 0; margin: 0 0 24px; } .tech-stage__list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; color: #555; } .tech-stage__list li i { color: var(--primary-color); font-size: 12px; width: 20px; text-align: center; flex-shrink: 0; } .tech-stage__note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; background: #f8faf5; border-left: 3px solid var(--primary-color); border-radius: 0 8px 8px 0; margin-bottom: 20px; } .tech-stage__note i { color: var(--primary-color); margin-top: 2px; flex-shrink: 0; } .tech-stage__note span { font-size: 14px; color: #555; font-weight: 600; line-height: 1.5; } .tech-stage__badges { display: flex; flex-wrap: wrap; gap: 8px; } .tech-stage__highlight { display: flex; align-items: center; gap: 16px; padding: 20px; background: #f8faf5; border: 1px solid #eef3e8; border-radius: 14px; margin-top: 8px; transition: all 0.3s ease; } .tech-stage__highlight:hover { border-color: var(--primary-color); box-shadow: 0 6px 20px rgba(109, 184, 43, 0.1); } .tech-stage__highlight-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; background: linear-gradient(135deg, #6db82b, #389416); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(109, 184, 43, 0.25); } .tech-stage__highlight-icon i { color: #fff; font-size: 20px; } .tech-stage__highlight h5 { font-weight: 700; color: var(--heading-color); margin-bottom: 4px; font-size: 16px; } .tech-stage__highlight p { margin: 0; font-size: 14px; color: #666; line-height: 1.6; } .tech-stage--alt { background: #f8faf5; } /* ======================================== Modular Unit Showcase ======================================== */ .tech-unit { position: relative; } .tech-unit__header { max-width: 760px; margin: 0 auto; } .tech-unit__tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary-color); padding: 8px 18px; background: rgba(109, 184, 43, 0.1); border-radius: 100px; margin-bottom: 20px; } .tech-unit__tag i { margin-right: 6px; } .tech-unit__title { font-family: "Montserrat", sans-serif; font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; color: var(--heading-color); line-height: 1.2; letter-spacing: -1px; margin-bottom: 18px; } .tech-unit__intro { font-size: 16px; line-height: 1.75; color: #555; margin: 0 auto; } .tech-unit__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .tech-unit__gallery-single { max-width: calc(50% - 12px); margin: 0 auto 60px; } .tech-unit__image { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); aspect-ratio: 16 / 10; transition: transform 0.5s ease, box-shadow 0.5s ease; } .tech-unit__image:hover { transform: translateY(-6px); box-shadow: 0 28px 72px rgba(0, 0, 0, 0.18); } .tech-unit__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .tech-unit__image:hover img { transform: scale(1.04); } .tech-unit__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .tech-unit__feature { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; transition: all 0.3s ease; } .tech-unit__feature:hover { border-color: rgba(109, 184, 43, 0.3); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(109, 184, 43, 0.1); } .tech-unit__feature-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(109, 184, 43, 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: all 0.3s ease; } .tech-unit__feature:hover .tech-unit__feature-icon { background: var(--primary-color); } .tech-unit__feature-icon i { font-size: 18px; color: var(--primary-color); transition: color 0.3s ease; } .tech-unit__feature:hover .tech-unit__feature-icon i { color: #fff; } .tech-unit__feature h5 { font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 700; color: var(--heading-color); margin-bottom: 8px; } .tech-unit__feature p { font-size: 14px; line-height: 1.6; color: #666; margin: 0; } @media (max-width: 991px) { .tech-unit__gallery { grid-template-columns: 1fr; } .tech-unit__gallery-single { max-width: 100%; } .tech-unit__features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .tech-unit__features { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 991px) { .tech-stage__image img { min-height: 300px; } .tech-stage__title { font-size: 26px; } .tech-stage__stat { flex: 1 1 calc(50% - 6px); } } @media (max-width: 575px) { .tech-stage__image img { min-height: 220px; } .tech-stage__number { font-size: 36px; } } /* ======================================== About — Pioneering Clean Energy Cards ======================================== */ .about-pioneer { position: relative; overflow: hidden; } .about-pioneer::before { content: ''; position: absolute; inset: 0; opacity: 0.06; background-image: linear-gradient(30deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(150deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(30deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(150deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(60deg, rgba(109, 184, 43, 0.45) 25%, transparent 25.5%, transparent 75%, rgba(109, 184, 43, 0.45) 75%, rgba(109, 184, 43, 0.45)), linear-gradient(60deg, rgba(109, 184, 43, 0.45) 25%, transparent 25.5%, transparent 75%, rgba(109, 184, 43, 0.45) 75%, rgba(109, 184, 43, 0.45)); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; pointer-events: none; } .about-pioneer>.container { position: relative; z-index: 2; } .about-pioneer__card { display: block; position: relative; border-radius: 20px; overflow: hidden; height: 380px; text-decoration: none; } .about-pioneer__card:hover { text-decoration: none; } .about-pioneer__img { position: absolute; inset: 0; } .about-pioneer__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .about-pioneer__card:hover .about-pioneer__img img { transform: scale(1.1); } .about-pioneer__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); transition: background 0.4s ease; } .about-pioneer__card:hover .about-pioneer__overlay { background: linear-gradient(0deg, rgba(109, 184, 43, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%); } .about-pioneer__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 2; } .about-pioneer__stat { display: inline-block; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 700; color: var(--primary-color); background: rgba(109, 184, 43, 0.15); border: 1px solid rgba(109, 184, 43, 0.3); padding: 4px 12px; border-radius: 4px; margin-bottom: 10px; letter-spacing: 0.5px; } .about-pioneer__card:hover .about-pioneer__stat { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); color: #fff; } .about-pioneer__content h5 { color: #fff; font-size: 18px; font-weight: 700; margin: 0; line-height: 1.3; } .about-pioneer__arrow { position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateX(-10px); transition: all 0.4s ease; } .about-pioneer__arrow i { color: #fff; font-size: 14px; } .about-pioneer__card:hover .about-pioneer__arrow { opacity: 1; transform: translateX(0); background: rgba(255, 255, 255, 0.2); } @media (max-width: 991px) { .about-pioneer__card { height: 320px; } } @media (max-width: 575px) { .about-pioneer__card { height: 280px; } } /* ============================================= Legal Pages — Imprint & Privacy ============================================= */ .legal-header { position: relative; padding: 140px 0 80px; background: var(--secondary-color); overflow: hidden; text-align: center; } .legal-header__pattern { position: absolute; inset: 0; opacity: 0.06; background-image: linear-gradient(30deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(150deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(30deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(150deg, var(--primary-color) 12%, transparent 12.5%, transparent 87%, var(--primary-color) 87.5%, var(--primary-color)), linear-gradient(60deg, rgba(109, 184, 43, 0.45) 25%, transparent 25.5%, transparent 75%, rgba(109, 184, 43, 0.45) 75%, rgba(109, 184, 43, 0.45)), linear-gradient(60deg, rgba(109, 184, 43, 0.45) 25%, transparent 25.5%, transparent 75%, rgba(109, 184, 43, 0.45) 75%, rgba(109, 184, 43, 0.45)); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; pointer-events: none; } .legal-header__title { font-family: "Montserrat", sans-serif; font-size: clamp(32px, 4vw, 48px); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 0; letter-spacing: -1px; } .legal-header__updated { color: rgba(255, 255, 255, 0.5); font-size: 14px; margin-top: 12px; } .legal-hero__badge { display: inline-block; background: rgba(109, 184, 43, 0.15); color: var(--primary-color); padding: 8px 24px; border-radius: 100px; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px; } .legal-hero__badge i { margin-right: 8px; } .legal-company-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 40px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); } .legal-highlight-card { background: var(--white); border-radius: 16px; padding: 32px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); height: 100%; } .legal-contact-box { background: var(--sub-bg); border-radius: 16px; padding: 32px; } .legal-contact-item { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; } .legal-contact-item:not(:last-child) { border-bottom: 1px solid var(--border); } .legal-contact-item i { font-size: 18px; margin-top: 4px; width: 20px; text-align: center; } .legal-contact-item span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; } .legal-contact-item a { font-weight: 600; color: var(--heading-color); } .legal-contact-item a:hover { color: var(--primary-color); } .legal-section-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 32px; height: 100%; transition: var(--transition); } .legal-section-card:hover { box-shadow: var(--shadow); border-color: transparent; } .legal-section-card__icon { width: 56px; height: 56px; line-height: 56px; text-align: center; border-radius: 12px; background: rgba(109, 184, 43, 0.1); color: var(--primary-color); font-size: 22px; margin-bottom: 20px; } .legal-section-card h4 { margin-bottom: 12px; } .legal-data-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 32px; height: 100%; transition: var(--transition); } .legal-data-card:hover { box-shadow: var(--shadow); border-color: transparent; } .legal-data-card__icon { width: 56px; height: 56px; line-height: 56px; text-align: center; border-radius: 12px; background: rgba(109, 184, 43, 0.1); color: var(--primary-color); font-size: 22px; margin-bottom: 20px; } .legal-data-card h4 { margin-bottom: 12px; } .legal-data-card__text ul { margin-top: 12px; padding-left: 0; } .legal-data-card__text ul li { position: relative; padding-left: 20px; margin-bottom: 8px; line-height: 26px; } .legal-data-card__text ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color); } .legal-text-sections { margin-top: 0; } .legal-text-block { padding: 32px 0; border-bottom: 1px solid var(--border); } .legal-text-block:first-child { padding-top: 0; } .legal-text-block:last-child { border-bottom: none; } .legal-text-block h3 { margin-bottom: 16px; font-size: 22px; } .legal-text-block h3 i { font-size: 20px; } .legal-text-block p { line-height: 30px; color: var(--paragraph); } .legal-text-block a { color: var(--primary-color); font-weight: 500; } .legal-text-block a:hover { text-decoration: underline; } @media (max-width: 991px) { .legal-header { padding: 120px 0 60px; } .legal-company-card, .legal-highlight-card { padding: 28px; } } @media (max-width: 575px) { .legal-header { padding: 100px 0 50px; } .legal-company-card, .legal-highlight-card { padding: 20px; } .legal-section-card, .legal-data-card { padding: 24px; } .legal-text-block { padding: 24px 0; } } /* ======================================== GLOBAL THEME — Matching Home Page Design ======================================== */ /* --- Organic Clip-Path on Key Images (matches home about section) --- */ .about-mission__img-main img, .sol-scale-image img, .partnerships-image img { clip-path: polygon(100% 86.207%, 100% 86.207%, 99.926% 86.953%, 99.711% 87.66%, 99.367% 88.32%, 98.905% 88.922%, 98.338% 89.458%, 97.677% 89.917%, 96.934% 90.291%, 96.12% 90.57%, 95.247% 90.744%, 94.326% 90.805%, 77.872% 90.805%, 77.872% 90.805%, 76.952% 90.865%, 76.079% 91.039%, 75.265% 91.318%, 74.522% 91.692%, 73.86% 92.151%, 73.293% 92.687%, 72.832% 93.289%, 72.488% 93.949%, 72.273% 94.657%, 72.199% 95.402%, 72.199% 95.402%, 72.124% 96.148%, 71.909% 96.856%, 71.565% 97.515%, 71.104% 98.118%, 70.537% 98.653%, 69.876% 99.113%, 69.132% 99.487%, 68.318% 99.766%, 67.445% 99.94%, 66.525% 100%, 5.674% 100%, 5.674% 100%, 4.753% 99.94%, 3.88% 99.766%, 3.066% 99.487%, 2.323% 99.113%, 1.662% 98.653%, 1.095% 98.118%, 0.633% 97.515%, 0.289% 96.856%, 0.074% 96.148%, 0% 95.402%, 0% 13.793%, 0% 13.793%, 0.074% 13.047%, 0.289% 12.34%, 0.633% 11.68%, 1.095% 11.078%, 1.662% 10.542%, 2.323% 10.082%, 3.066% 9.709%, 3.88% 9.43%, 4.753% 9.256%, 5.674% 9.195%, 36.738% 9.195%, 36.738% 9.195%, 37.658% 9.135%, 38.531% 8.961%, 39.345% 8.682%, 40.088% 8.308%, 40.75% 7.849%, 41.317% 7.313%, 41.778% 6.711%, 42.122% 6.051%, 42.337% 5.343%, 42.411% 4.598%, 42.411% 4.598%, 42.486% 3.852%, 42.701% 3.144%, 43.045% 2.485%, 43.506% 1.882%, 44.073% 1.347%, 44.734% 0.887%, 45.478% 0.513%, 46.292% 0.234%, 47.165% 0.06%, 48.085% 0%, 94.326% 0%, 94.326% 0%, 95.247% 0.06%, 96.12% 0.234%, 96.934% 0.513%, 97.677% 0.887%, 98.338% 1.347%, 98.905% 1.882%, 99.367% 2.485%, 99.711% 3.144%, 99.926% 3.852%, 100% 4.598%, 100% 86.207%); } /* Mirrored clip-path for right-side images */ .clip-organic-right img, .tech-stage--alt .tech-stage__image img { clip-path: polygon(0% 86.207%, 0% 86.207%, 0.074% 86.953%, 0.289% 87.66%, 0.633% 88.32%, 1.095% 88.922%, 1.662% 89.458%, 2.323% 89.917%, 3.066% 90.291%, 3.88% 90.57%, 4.753% 90.744%, 5.674% 90.805%, 22.128% 90.805%, 22.128% 90.805%, 23.048% 90.865%, 23.921% 91.039%, 24.735% 91.318%, 25.478% 91.692%, 26.14% 92.151%, 26.707% 92.687%, 27.168% 93.289%, 27.512% 93.949%, 27.727% 94.657%, 27.801% 95.402%, 27.801% 95.402%, 27.876% 96.148%, 28.091% 96.856%, 28.435% 97.515%, 28.896% 98.118%, 29.463% 98.653%, 30.124% 99.113%, 30.868% 99.487%, 31.682% 99.766%, 32.555% 99.94%, 33.475% 100%, 94.326% 100%, 94.326% 100%, 95.247% 99.94%, 96.12% 99.766%, 96.934% 99.487%, 97.677% 99.113%, 98.338% 98.653%, 98.905% 98.118%, 99.367% 97.515%, 99.711% 96.856%, 99.926% 96.148%, 100% 95.402%, 100% 13.793%, 100% 13.793%, 99.926% 13.047%, 99.711% 12.34%, 99.367% 11.68%, 98.905% 11.078%, 98.338% 10.542%, 97.677% 10.082%, 96.934% 9.709%, 96.12% 9.43%, 95.247% 9.256%, 94.326% 9.195%, 63.262% 9.195%, 63.262% 9.195%, 62.342% 9.135%, 61.469% 8.961%, 60.655% 8.682%, 59.912% 8.308%, 59.25% 7.849%, 58.683% 7.313%, 58.222% 6.711%, 57.878% 6.051%, 57.663% 5.343%, 57.589% 4.598%, 57.589% 4.598%, 57.514% 3.852%, 57.299% 3.144%, 56.955% 2.485%, 56.494% 1.882%, 55.927% 1.347%, 55.266% 0.887%, 54.522% 0.513%, 53.708% 0.234%, 52.835% 0.06%, 51.915% 0%, 5.674% 0%, 5.674% 0%, 4.753% 0.06%, 3.88% 0.234%, 3.066% 0.513%, 2.323% 0.887%, 1.662% 1.347%, 1.095% 1.882%, 0.633% 2.485%, 0.289% 3.144%, 0.074% 3.852%, 0% 4.598%, 0% 86.207%); } /* Left-side tech stage images get the original clip-path */ .tech-stage:not(.tech-stage--alt) .tech-stage__image img { clip-path: polygon(100% 86.207%, 100% 86.207%, 99.926% 86.953%, 99.711% 87.66%, 99.367% 88.32%, 98.905% 88.922%, 98.338% 89.458%, 97.677% 89.917%, 96.934% 90.291%, 96.12% 90.57%, 95.247% 90.744%, 94.326% 90.805%, 77.872% 90.805%, 77.872% 90.805%, 76.952% 90.865%, 76.079% 91.039%, 75.265% 91.318%, 74.522% 91.692%, 73.86% 92.151%, 73.293% 92.687%, 72.832% 93.289%, 72.488% 93.949%, 72.273% 94.657%, 72.199% 95.402%, 72.199% 95.402%, 72.124% 96.148%, 71.909% 96.856%, 71.565% 97.515%, 71.104% 98.118%, 70.537% 98.653%, 69.876% 99.113%, 69.132% 99.487%, 68.318% 99.766%, 67.445% 99.94%, 66.525% 100%, 5.674% 100%, 5.674% 100%, 4.753% 99.94%, 3.88% 99.766%, 3.066% 99.487%, 2.323% 99.113%, 1.662% 98.653%, 1.095% 98.118%, 0.633% 97.515%, 0.289% 96.856%, 0.074% 96.148%, 0% 95.402%, 0% 13.793%, 0% 13.793%, 0.074% 13.047%, 0.289% 12.34%, 0.633% 11.68%, 1.095% 11.078%, 1.662% 10.542%, 2.323% 10.082%, 3.066% 9.709%, 3.88% 9.43%, 4.753% 9.256%, 5.674% 9.195%, 36.738% 9.195%, 36.738% 9.195%, 37.658% 9.135%, 38.531% 8.961%, 39.345% 8.682%, 40.088% 8.308%, 40.75% 7.849%, 41.317% 7.313%, 41.778% 6.711%, 42.122% 6.051%, 42.337% 5.343%, 42.411% 4.598%, 42.411% 4.598%, 42.486% 3.852%, 42.701% 3.144%, 43.045% 2.485%, 43.506% 1.882%, 44.073% 1.347%, 44.734% 0.887%, 45.478% 0.513%, 46.292% 0.234%, 47.165% 0.06%, 48.085% 0%, 94.326% 0%, 94.326% 0%, 95.247% 0.06%, 96.12% 0.234%, 96.934% 0.513%, 97.677% 0.887%, 98.338% 1.347%, 98.905% 1.882%, 99.367% 2.485%, 99.711% 3.144%, 99.926% 3.852%, 100% 4.598%, 100% 86.207%); } /* Pioneer cards keep border-radius — clip-path not used on overlay cards */ /* --- Subpage Hero Cinematic Enhancements --- */ .about-hero__grain { position: absolute; inset: 0; z-index: 1; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; } .legal-header__grain { position: absolute; inset: 0; z-index: 1; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; } /* Cinematic zoom on subpage hero bg */ .about-hero__bg { transform: scale(1.06); animation: heroZoom 18s ease-out forwards; } /* Hero overlay — match home page gradient style */ .about-hero__overlay { background: linear-gradient(170deg, rgba(0, 0, 0, 0.72) 0%, rgba(15, 35, 10, 0.5) 40%, rgba(0, 0, 0, 0.55) 70%, rgba(10, 10, 10, 0.88) 100%); z-index: 1; } /* Animated entry for subpage hero content */ .about-hero__content { animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; } .about-hero__badge { animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; } .about-hero__content h1 { animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; } .about-hero__content p { animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; } /* Scroll indicator for subpage heroes */ .about-hero__scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1s both; } .about-hero__scroll span { display: block; width: 24px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 12px; position: relative; } .about-hero__scroll span::after { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 8px; background: rgba(255, 255, 255, 0.6); border-radius: 2px; animation: scrollBounce 2s ease-in-out infinite; } /* Legal header cinematic entry */ .legal-header .legal-hero__badge { animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; } .legal-header__title { animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; } .legal-header__updated { animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; } /* --- Consistent section header styling across pages --- */ .section-header h5 { font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary-color); font-size: 13px; } /* --- High Permanence Carbon Removal Card --- */ .permanence-card { background: linear-gradient(350deg, #ade038 0%, #2b9409 40%, #3a7028 100%); border-radius: 24px; padding: 40px 36px; position: relative; overflow: hidden; box-shadow: 0 16px 48px rgba(27, 58, 19, 0.25); } .permanence-card::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(109, 184, 43, 0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .permanence-card__header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .permanence-card__icon { background: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } .permanence-card__header h4 { color: #fff; font-size: 22px; font-weight: 700; margin: 0; } .permanence-card__text { color: rgba(255, 255, 255, 0.85); font-size: 15px; line-height: 1.7; margin-bottom: 20px; max-width: 800px; } .permanence-card__badges { display: flex; flex-wrap: wrap; gap: 10px; } .permanence-card__badges .inv-badge { font-size: 13px; padding: 8px 18px; } @media (max-width: 575px) { .permanence-card { padding: 28px 24px; } .permanence-card__header h4 { font-size: 18px; } .permanence-card__text { font-size: 14px; } .permanence-card__badges { gap: 8px; } .permanence-card__badges .inv-badge { font-size: 12px; padding: 6px 14px; width: 100%; text-align: center; } } /* ======================================== Hero Split — Cloud BG + Centered Banner ======================================== */ .hero-split { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(180deg, #dfe6e9 0%, #e7edef 60%, #ffffff 100%); padding: 160px 0 80px; } .hero-split__cloud { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .hero-split__cloud img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.08)); opacity: 1; } .hero-split>.container { position: relative; z-index: 2; text-align: center; } .hero-split__text { text-align: center; max-width: 750px; margin: 0 auto 0; animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; } .hero-split__text .hero-cinematic__tag { color: var(--primary-color); border-color: rgba(109, 184, 43, 0.35); background: rgba(109, 184, 43, 0.1); } .hero-split__title { font-family: "Montserrat", sans-serif; font-size: clamp(32px, 5.5vw, 64px); font-weight: 700; line-height: 1.1; color: var(--heading-color); margin-bottom: 20px; letter-spacing: -2px; animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; } .hero-split__desc { font-family: "Inter", sans-serif; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.75; color: #555; max-width: 600px; margin: 0 auto 32px; animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; } .hero-split__text .btn-hero { animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; } /* Banner image — 90% width, tall, centered, rounded */ .hero-split__banner { position: relative; width: 90%; max-width: 1300px; height: 520px; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(109, 184, 43, 0.1); animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; } .hero-split__banner img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .hero-split__banner-overlay { position: absolute; inset: 0; background: linear-gradient(170deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.02) 40%, rgba(0, 0, 0, 0.15) 100%); pointer-events: none; } /* Subpage hero — shorter than home */ body:not(.home) .hero-split { min-height: auto; padding: 150px 0 70px; } body:not(.home) .hero-split__banner { height: 400px; } /* Scroll indicator */ .hero-split .hero-cinematic__scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1s both; } .hero-split .hero-cinematic__scroll span { border-color: rgba(0, 0, 0, 0.2); } .hero-split .hero-cinematic__scroll span::after { background: rgba(0, 0, 0, 0.4); } @media (max-width: 991px) { .hero-split { padding: 120px 0 50px; min-height: auto; } .hero-split__banner { width: 95%; height: 380px; border-radius: 16px; } } @media (max-width: 575px) { .hero-split { padding: 110px 0 40px; } .hero-split__banner { width: 100%; height: 280px; border-radius: 12px; } .hero-split__text { margin-bottom: 32px; } } /* --- Partnership image wrapper --- */ .partnerships-image { max-width: 600px; position: relative; } .partnerships-image img { width: 100%; border-radius: 0; }